DataTable動的データソースでソート可能

Question

私は、 'Time1'と 'Time2'の間のイベントを持つテーブルを持っています。

[ロード]をクリックすると、データがajax関数によって読み込まれ、いくつかのパラメータが設定されます。

は今、私はソート可能なテーブルを使用したい... DataTable

表が正しく初期化されます。しかし、私は行を追加すると

$('table').append('<tr><td> ' + row.id + '</td><td>' + row.name + '</td></tr>'); 

私はテーブルをソートすることはできません。

どのように私はテーブルをソート可能にするためにAjaxでそれを実現することができますか？私はDataTable Manualはそれ

<table class="table table-bordered" id="report-table" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>Name</th> 
     </tr> 
    </thead> 
    <tbody id="report"> 
    </tbody> 
</table> 

とJavaScriptを意味する方法を知らない：

$(document).ready(function() { 
    var dataset = null; 

    $('#report-table').dataTable({ 
     data: dataset, 
     columns: [ 
      { title: 'ID' }, 
      { title: 'Name' } 
     ] 
    }); 

    $('#btn-load, .btn-filter-apply').on('click', function() { 
     $('#filter').modal('hide');  

     var data = new Array(); 
     $('.filter-list tr').each(function(idx, row) { 
      data.push([$(row).find('td').eq(0).text(), $(row).find('td').eq(1).text(), $(row).find('td').eq(2).text()]); 
     }); 

     $.post('/data', { from: $('#ipDateTimeFrom').val(), till: $('#ipDateTimeTo').val(), data: data, ip: $('#sb-server option:selected').val() }, function(resp) { 
      $('#report').html(''); 
      dataset = resp.data; 
      $.each(resp.data, function(idx, row) { 
       $('#report').append('<tr style="background-color:#ffffff"><td>' + row.ID + '</td><td>' + row.Name + '</td></tr>'); 
      });  
     }); 
    }); 
}); 

Answer 1

はdataTable.row.add()とdataTable.order()を参照してください - あなたは、dataTableの順序を変更するAJAXを必要はありません。

$(document).ready(function() { 
    var dataset = null; 

    // Table represented as var table. 
    var table = $('#report-table').DataTable({ 
    data: dataset, 
    columns: [{ 
     title: 'ID' 
    }, { 
     title: 'Name' 
    }] 
    }); 

    var rowData = [ "id", "title" ]; 

    // Add an array of row data, e.g., [ "id", "title" ], have to redraw 
    // when we modify table. 
    table.row.add(rowData).draw(false); 

    $('#btn-load, .btn-filter-apply').on('click', function() { 
    $('#filter').modal('hide'); 

    var data = new Array(); 
    $('.filter-list tr').each(function(idx, row) { 
     data.push([$(row).find('td').eq(0).text(), $(row).find('td').eq(1).text(), $(row).find('td').eq(2).text()]); 
    }); 

    // Order based on index - maybe you can use your mysterious 
    # $("filter-list tr") query above to order more dynamically 
    table.order([1, 'asc'], [2, 'asc']).draw(); 
    }); 
}); 

はまた、あなたがAJAXソースからデータを供給することができますのでご注意：EDITが、これはあなたが故にコードであることを含め、dataTable.row.add()方法を使用してデータトウにテーブルを追加することの適切dataTable規則に従う必要がありますのでご注意ください

$('#report-table').dataTable({ 
    "ajax": "data.json" 
}); 

EDIT：JSFiddleをご希望の場合のように初期化子は、次の。