헤더의 jQuery datatable 라디오 버튼을 지 웁니다.

Question

3 개의 헤더가있는 jQuery Datatable을 사용하고 있습니다. 하나의 머리글에는 두 개의 라디오 단추가 있고 다른 머리글에는 선택 상자가 있습니다. 기본적으로 옵션 중 하나가 선택됩니다.

Datatable의 검색 기능을 사용하여 특정 레코드를 검색 할 때 어떤 라디오 버튼이 선택되었는지 표시하지 않습니다. 데이터 테이블 검색을 사용한 후에 DOM을 검사했으며 입력 요소에 CHECKED 특성이 여전히 포함되어 있습니다. 선택 상자는 영향을받지 않습니다. 선택 상자의 값은 여전히 ​​유지됩니다.

또한 IE는 정상적으로 작동합니다. O_o FF와 Chrome에서 확인 된 값을 인식하지 못합니다.

$(selector).datatable().fnDraw(); ... 아니 주사위를 시도했습니다.

검색 후 또는 검색 중에 checked 속성을 인식하도록 데이터 테이블을 얻으려면 어떻게해야합니까? 비슷한 경험을 한 사람이 있습니까?

도움을 주시면 감사하겠습니다. 감사.

편집 : 추가 조사를 마치면 fnDraw가 라디오 버튼의 값을 지우는 것처럼 보입니다.

코드

데이터 테이블 (자바 스크립트)를 초기화 데이터 테이블 헤더 의

$.get('store_handler.ashx', { cmd: '9', pubId: pubId, sub: sub }, function(o) { 
    $("#researchTableDiv").html(o.datatableContent); 

    $('#ResearchTable').dataTable({ 
     "bJQueryUI": true, 
     "bPaginate": false, 
     "sScrollY": "450px", 
     "bSort": false 
    }); 

    if (o.radioCheck == "single") 
     $('#radioSingle').attr("checked", "checked"); 
    else 
     $('#radioSub').attr("checked", "checked"); 

}, "json"); 

HTML (C# 닷넷)

htmlString.Append("<thead>"); 
    htmlString.Append("<tr>"); 
    htmlString.Append("<th valign=\"middle\" style=\"width: 200px; text-align: left;valign:top;border-right:0px;padding-bottom:0px\" class=\"header\">Filter:&nbsp;"); 
    htmlString.Append("<select name=\"nonSort2\" style=\"height:20px;padding:0px;margin-top:-0px;font-size:11px\">"); 
    htmlString.Append("<option value=\"AKLPH\">All</option>"); 
    htmlString.Append("<option value=\"-\">---------------</option>"); 
    htmlString.Append("<option value=\"AK\">Alaska</option>"); 
    htmlString.Append("<option value=\"AL\">Etc...</option>"); 
    htmlString.Append("</select>"); 
    htmlString.Append("</th>"); 
    htmlString.Append("<th align=\"left\" class=\"header\" >"); 
    if (sub == "0") 
    { 
     htmlString.Append("<input type=\"radio\" value=\"0\" name=\"rdoSubscription\" id=\"radioSingle\" checked=\"CHECKED\" style=\"margin-left:1px\"/>Single Report"); 
     htmlString.Append("<input type=\"radio\" value=\"1\" name=\"rdoSubscription\" id=\"radioSub\" onclick=\"getPubDetails('" + pubId + "','1');\" style=\"margin-left:1px\"/>Subscription"); 
     jOut.Put("radioCheck", "single"); 
    } 
    else 
    { 
     htmlString.Append("<input type=\"radio\" value=\"0\" name=\"rdoSubscription\" id=\"radioSingle\" onclick=\"getPubDetails('" + pubId + "','0');\" style=\"margin-left:1px\"/>Single Report"); 
     htmlString.Append("<input type=\"radio\" value=\"1\" name=\"rdoSubscription\" id=\"radioSub\" checked=\"CHECKED\" style=\"margin-left:1px\"/>Subscription"); 
     jOut.Put("radioCheck", "sub"); 
    } 
    htmlString.Append("</th>"); 
    htmlString.Append("<th class=\"header\" align=\"center\">Action</th>"); 
    htmlString.Append("</tr>"); 
    htmlString.Append("</thead>"); 

Answer 1

는 추첨 이벤트 후 라디오 버튼을 설정하십시오 :

$.get('store_handler.ashx', { cmd: '9', pubId: pubId, sub: sub }, function(o) { 
$("#researchTableDiv").html(o.datatableContent); 

$('#ResearchTable').dataTable({ 
    "bJQueryUI": true, 
    "bPaginate": false, 
    "sScrollY": "450px", 
    "bSort": false, 
    "fnDrawCallback": function() { 
     if (o.radioCheck == "single") 
     $('#radioSingle').attr("checked", "checked"); 
     else 
     $('#radioSub').attr("checked", "checked"); 
     } 
    } 
}); 


}, "json"); 

Answer 2

나는 비슷한 있었다 단지문제를 해결하고 this link에 빨간색으로 문제를 읽음으로써 문제를 해결했습니다. 어쩌면 그것은 당신을 도울 수 있지만 어쩌면 가능할 수는 있습니다.

Answer 3

내 응용 프로그램에 많은 DataTable을 구축하지만 서버 측 솔루션에 "무차별 대입"을 시도하는 것처럼 보입니다. 기술적으로, HTML을 출력하고 DataTables 형식을 지정하기 때문에 dom 기반 테이블입니다. 서버 측 솔루션을 활용하려고 시도 할 수있는 $.get에서 나타납니다. 서버 측은 실제로 jQuery에 보내는 것을 제한하고 수백 (또는 내 경우에는 수백만) 개의 레코드를 한꺼번에 처리해야하는 필요성을 줄여주기 때문에 훨씬 더 효율적입니다. 물론, 동일한 정보를 얻기 위해 dom 구조를 트래버스하지 않고 원시 json 스트림을 가져 와서 테이블을 만드는 것이 더 빠릅니다.

진정한 서버 측 솔루션을 시도해보십시오 ..... 유일한 이유는 데이터가 선택한 서버 측 기술에서 직접 나오고 분명히 여기에 있으므로 심각하게 조작되지 않습니다. 먼저, 파일을 설정하십시오 (아마도 store_handler입니다.ASHX) 당신이 문자열은 다음과 비슷한 모습이 될 것입니다) JSON (이 작업에 가장 효율적인 전송 방법에 필요한 출력 :

{"sEcho": 1, "iTotalRecords": 1, "iTotalDisplayRecords": 1, "aaData":[["one", "for", "each", "column"]]} 

먼저 화면에 출력하여 JSON을 얻을이 일을 할 때 확인하고 그런 다음 jsonlint.com

를 통해 유효 기간을 확인하기 위해 테스트, JQuery와는 다음과 같이 보일 것입니다 :

$('#detailstable').dataTable({            
    "aaSorting": [[ 1, "asc" ]], 
    "bProcessing": true, 
    "bServerSide": true, 
    "sAjaxSource": "handler.ashx", 
    "bJQueryUI": true, 
    "sPaginationType": "full_numbers", 
    "bAutoWidth": false, 
    "bLengthChange": true, 
    "bPaginate": true, 
    "bSort": true, 
    "iDisplayLength": 10, 
    "bInfo": true, 
    "aoColumns": [ 
    { "sTitle": "One", "sWidth": "15%" , "sClass":"center"}, 
    { "sTitle": "For", "sWidth": "15%" , "sClass":"center"}, 
    { "sTitle": "Each", "sWidth": "15%", "sClass":"center" }, 
    { "sTitle": "Column", "sWidth": "15%" , "sClass":"center"} 
    ], 
     "fnServerData": function (sSource, aoData, fnCallback) { 
    var something = $('#something').val(); 
    var somethingelse = $('#somethingelse').val(); 
    aoData.push( { "name": "something", "value": something  }, 
      { "name": "somethingelse", "value": somethingelse } 
    ); 
    $.ajax({ 
      "dataType": 'json', 
     "type": "POST", 
     "url": sSource, 
     "data": aoData, 
     "success": fnCallback 
    }); 
    } 
    }); 

- 나는 데이터를 전송하는 콜백입니다되는 fnServerData 섹션을 추가 - 편집 질문. 주어진 예제에서, 그것은 변수에 무언가를 만들고 $ _REQUEST 문자열에서 무언가를 사용하여 쿼리에 사용할 것입니다. 선택한 필드의 값을 쿼리로 가져 와서 결과를 얻을 수 있습니다. - 편집 -

이제 검색 할 때 소스 페이지에 정렬/필터링/검색/등을 처리하기위한 요소를 추가해야합니다. 이것은 소리보다 훨씬 간단합니다 ... 각 변수는 $ _REQUEST 변수를 통해 전달됩니다. 들어오는 내용의 예와 정렬 방법에 대한 예제는 tutorial online을 확인하십시오. 예, 튜토리얼은 PHP로되어 있지만, 중요한 부분은 전달되는 값과 그로부터 쿼리를 적절하게 작성하는 것입니다. 혀의 PHP 특정 요소를 무시하십시오. 우리가 혼란 스러울 경우 도와 드리겠습니다.

Voila ... 더 효율적이고 덜 혼란스럽고 문제없이 내 응용 프로그램에서 작동하는 것을 거의 정확하게 수행합니다. javascript 부두가 필요하지 않습니다.