第一次初始化后,DatatTable绘制不起作用

问题描述:

我正在使用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的数据表是我的结果更新,但更新的平局值是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属性的值之后,所有事情都开始良好运行。