2017-03-08 82 views
0

我正在使用JQuery DataTable並在過濾和排序服務器端數據時遇到問題。它在第一次頁面加載時工作正常,但下次嘗試對數據進行排序或過濾時,它不會重新繪製行。第一次初始化後,DatatTable繪製不起作用

我調試它,發現它提取了正確的數據,但沒有繪製新的數據。

   var modifyRequestData = function (d) { 

       var d = $.parseJSON(d); 

       var jsonData = {}; 
       jsonData.data = d.Products; 
       jsonData.recordsTotal = d.TotalCount; 
       jsonData.recordsFiltered = d.Products.length 

       return JSON.stringify(jsonData); 
      }; 

      var modifyParams = function (d) { 

       var params = {}; 

       params.Draw = d.draw; 
       params.Page = parseInt(d.start) + 1; 
       params.OrderColumn = d.columns[d.order[0].column].data; 
       params.OrderType = d.order[0].dir; 

       $(settings.searchFormID).find("input, select").each(function() { 

        var val = $(this).val(); 
        var name = this.name; 

        params[name] = val; 
       }); 

       return params; 
      }; 

      var getProducts = function() { 

       var columns = [ 
        { "data": "Id" }, 
        { "data": "Name" }, 
        { "data": "Price" }, 
        { "data": "Id" } 
       ] 

       var modifiedColumns = [{ 
        'targets': 0, 
        'searchable': false, 
        'orderable': false, 
        'width': '1%', 
        'className': 'dt-body-center', 
        'render': function (data, type, full, meta) { 
         return '<input type="checkbox">'; 
        } 
       }, { 
        'targets': columns.length - 1, 
        'searchable': false, 
        'orderable': false, 
        'width': '1%', 
        'className': 'dt-body-center', 
        'render': function (data, type, full, meta) { 
         return '' 
        } 
       }]; 

       var ajaxConfig = { 
        "url": "/api/products/", 
        "dataFilter": modifyRequestData, 
        "data": modifyParams 
       } 

       productDatatable = $('#listContainer table').DataTable({ 
        "bProcessing": true, 
        "bServerSide": true, 
        "bFilter": true, 
        "lengthChange": true, 
        "ajax": ajaxConfig, 
        "columns": columns, 
        'columnDefs': modifiedColumns 
       }); 

       productDatatable.on('draw.dt', function() { 
        alert('Table redraw'); 
       }); 

      }; 
+0

那麼,您的'可訂購'和'可搜索'參數對於所有列定義都是錯誤的。這可能是問題所在。你有這個jsfiddle嗎? – diogenesgg

回答

1

我有完全相同的問題,因爲你,我終於發現,我已經在服務器端返回的對象硬編碼測試的原因平局值設置爲1。

如此以來,在第一次通話抽籤屬性的值是1的數據表是我的結果更新,但更新的平局值是4,我還在恢復1.

勇可以找到在jquery.dataTables.js文件這一功能:

function _fnAjaxUpdateDraw (settings, json) 

,尤其是這樣的代碼:

if (draw) { 
     // Protect against out of sequence returns 
     if (draw*1 < settings.iDraw) { 
      return; 
     } 
     settings.iDraw = draw * 1; 
    } 

在服務器端正確設置了draw屬性的值之後,所有事情都開始良好運行。