2017-03-08 5 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

まあ、 'orderable'と 'searchable'のパラメータは、すべての列定義に対してfalseです。それは問題かもしれません。あなたはこれのための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プロパティの値を正しく設定したら、すべてがうまくいくようになりました。

関連する問題