如何使用JQuery DataTables正確地從Web方法重新加載數據？

我使用JQuery DataTables插件與我的表一起工作，最近我切換到服務器端分頁和篩選。特別是，我有一個Web方法返回的數據來填充客戶表：如何使用JQuery DataTables正確地從Web方法重新加載數據？

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

，在我的網頁我用這個代碼來檢索數據通過AJAX調用。

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 
     ] 
    });

正如你所看到的，我傳遞到Web方法兩個參數：jsonAOData，所有的信息，分頁和過濾，以及mode，定義如何從數據庫獲取數據。它的工作原理非常完美，但現在我需要在我的表格中實時傳遞數據，傳遞給我的Web方法mode不同的值。

閱讀文檔我發現fnReloadAjax()函數可以幫助我，但我找不到正確的方法將其應用於我的問題。

我試着這樣說：

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

但簡化版，它的工作。你可以幫我嗎？我在哪裏做錯了？

如何將新參數傳遞給我的web方法？

來源

2013-01-17 davioooh

我發現fnReloadAjax()不適合我。所以下面的一些論壇我決定使用fnDraw()。

我定義了一個全局變量mode，根據我想檢索的數據進行估價。然後我調用fnDraw()。該表是重新繪製從Web方法加載數據。

在AJAX調用我設置：

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

來源

2013-01-17 14:48:16 davioooh

不能立即發現什麼是缺失/錯誤 - 但這是我的版本的作品。

$(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 
     });

來源

2013-01-17 10:42:53 BlueChippy

注：礦存在跨域設置...但他們卻在同一個域的呼叫沒有（用戶察覺）的區別。 – BlueChippy

如何使用JQuery DataTables正確地從Web方法重新加載數據？

回答

相關問題