JQuery DataTables을 사용하여 웹 메서드에서 데이터를 올바르게 다시로드하는 방법은 무엇입니까?

Question

JQuery DataTables 플러그인을 사용하여 테이블을 작업하고 최근에는 서버 측 페이지 매김 및 필터링으로 전환했습니다. 특히, 나는 고객 테이블을 채우는 데이터를 반환하는 웹 방법이 있습니다

[WebMethod] 
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
    public string GetCustomers(string jsonAOData, int mode) 
    { 
     // ... 
    } 

을 내 페이지에 내가 AJAX 호출을 통해 데이터를 검색하기 위해이 코드를 사용합니다. DB에서 데이터를 가져 오는 방법을 정의 매김하고 필터링 및 mode에 대한 모든 정보와 함께, jsonAOData : 당신이 볼 수 있듯이

var grid = $('#grid').dataTable({ 
     bJQueryUI: true, 
     bLengthChange: false, 
     iDisplayLength: listItemsPerPage, 
     bDestroy: true, 
     "bProcessing": true, 
     "bSort": true, 
     "sPaginationType": "full_numbers", 
     "bServerSide": true, 
     "sAjaxSource": "/wsData/GetData.asmx/GetCustomers", 
     "fnServerData": function (sSource, aoData, fnCallback) { 

      var jsonAOData = JSON.stringify(aoData); 

      $.ajax({ 
       //dataType: 'json', 
       contentType: "application/json; charset=utf-8", 
       type: "POST", 
       url: sSource, 
       data: "{jsonAOData : '" + jsonAOData + "', mode:'0'}", 
       success: function (msg) { 
        fnCallback(JSON.parse(msg.d)); 
       }, 
       error: function (XMLHttpRequest, textStatus, errorThrown) { 
        alert(XMLHttpRequest.status); 
        alert(XMLHttpRequest.responseText); 
       } 
      }); 
     }, 
     "aoColumnDefs": [ 
      // my columns structure 
     ] 
    }); 

, 나는 웹 메소드에 두 개의 매개 변수를 전달하고있다. 완벽하게 작동하지만 지금은 내 테이블에서 데이터를 다시로드하여 내 웹 메서드에 mode의 다른 값을 전달해야합니다.

문서 읽기 내가 fnReloadAjax() 함수는 나를 도울 수 있다고 알았지 만, 내 문제에 그것을 적용하는 올바른 방법을 찾을 수 없습니다.

나는이 방법으로 시도 :

grid.fnReloadAjax("/wsData/GetData.asmx/GetCustomers?mode=1"); 

을하지만 일을 does't. 나 좀 도와 줄 수있어? 내가 어디에서 잘못하고있는거야?

어떻게 웹 메소드에 새 인수를 전달할 수 있습니까?

Answer 1

나는 fnReloadAjax()이 나를 위해 그렇게 잘 작동하지 않는다는 것을 발견했습니다. 그래서 일부 포럼을 따라 fnDraw()을 사용하기로 결정했습니다.

내가 검색하고자하는 데이터에 따라 가치가있는 글로벌 변수 mode을 정의했습니다. 그런 다음 fnDraw()을 호출합니다. 테이블은 웹 메소드에서 데이터를로드하여 다시 그려집니다. AJAX 호출에

나는 설정 :

data: "{jsonAOData : '" + jsonAOData + "', mode:'" + mode +"'}", 

Answer 2

실종/잘못 된 부분을 즉시 발견 할 수는 없지만 이것이 작동하는 제 버전입니다.

$(document).ready(function() { 
     jQuery.support.cors = true; 

     var sAjaxSourceUrl = '@ViewBag.sAjaxSourceUrl' //passing mine from MVC3 viewbag, but you can hard-code it 
     var dt = $('#dataTable').dataTable({ 
      "bProcessing": true, 
      "bSort": true, 
      "bServerSide": true, 
      "sServerMethod": "POST", 
      "sAjaxSource": sAjaxSourceUrl, 
      "fnServerData": function (sSource, aoData, fnCallback) { 
       var jsonAOData = JSON.stringify(aoData); 
       $.ajax({ 
        crossDomain: true, 
        type: "POST", 
        url: sSource, 
        data: jsonAOData, 
        dataType: "json", 
        contentType: "application/json; charset=utf-8", 
        success: function (data) { 
         fnCallback($.parseJSON(data)); 
        }, 
        error: function (XMLHttpRequest, textStatus, errorThrown) { 
         alert("Status: " + XMLHttpRequest.status + "\r\n" + textStatus + "\r\n" + errorThrown); 
        } 
       }); 
      }, 
      "aoColumnDefs": [ 
// my columns structure 
], 
      "sScrollY": "500", 
      "bScrollCollapse": true 
     });