Datatableはスクロール時にすべての行を表示しません

Question

各スクロールでバックエンド応答から行を取得しようとしています。私は AJAXの応答を得るが、私は完全な行を得ることができない、それはデータを食べる おそらく最後のもの。

私は他の方法で試しましたが、全く動作しませんでした。私はAJAXで再描画して再読み込みを試みました。ここで

は、私のJSコードを行く：

var table= $('#subscriber_list').DataTable({ 
     responsive: true, 
     "processing":true, 
     serverSide: true, 
     "scrollCollapse":true, 
     "sDom":"BifrtS", 
     scrollY:'35vh', 
     scrollCollapse: true, 
     paging:false, 
     "oScroller": { 
      "displayBuffer": 2,"loadingIndicator": true 
     }, 
     "ajax": {"url": $('#data_table_column_list').attr("url"),"type": 'POST',"data":{'type':subscriber_type,'end_date_from':end_date_from,'end_date_to':end_date_to}}, 
     "columns": JSON.parse($('#data_table_column_list').val().replace(/\'/g, '"')), 
     "columnDefs": [ 
      { "orderable": false, "targets": 2 } 
     ], 
     buttons: [ 
      { 
       extend: 'excelHtml5', 
       text: 'Export selected', 
       exportOptions: { 
        columns: ':visible:not(.not-exported)', 
        modifier: { 
         selected: true 
        } 
       }, 
       title: 'Data export' 
      }, 
      { 
       extend: 'excelHtml5', 
       text: 'Export All', 
       exportOptions: { 
        columns: ':visible:not(.not-exported)' 
       }, 
       title: 'Data export' 
      } 
     ] 
    }); 

Answer 1

あなたがテーブルに仕事をしたいかに応じて、次のいずれかまたは両方を必要とします。

現時点では、Datatablesのデフォルトは10行であるため、切り捨てられています。ページングは​​falseに設定されているため、10日以降の結果が表示されます。

のいずれかを、この切り替え：あなたは、各ページの10と結果の複数のページをあげることpaging:true,

：にpaging:false,

を。

ページあたり10行を超える場合は、"pageLength": 50などの値を追加することもできます。

Answer 2

ここで私は複数のラジオボタンスイッチから同じデータテーブルを使用しています。私はtable.destroy（）を使用しているので、データテーブルからの警告を再初期化できません。それは私がオプションを切り替えている間に作成されたすべてのオブジェクトを破壊しますが、それを使用するために代替を使用します。私は、それは11のうちの10行を表示し、この実際 https://datatables.net/manual/tech-notes/3

$('.subscriber_type').on('change',function (e){ 
    var table = $('#subscriber_list').DataTable(); 
    subscriber_data_table($(this).val(),$('#datepicker_from').val(),$('#datepicker_to').val()); 
}); 

subscriber_data_table("all",null,null); 

    function subscriber_data_table(subscriber_type,end_date_from,end_date_to) { 
    $('#subscriber_list').DataTable({ 
     responsive: true, 
     "processing": true, 
     serverSide: true, 
     paging:true, 
     "pageLength":50, 
     "drawCallback": function(settings) { 
      console.log('hit began'); 
     }, 
     "sScrollY": "379", 
     "sDom":"BifrtS", 
     "oScroller": { 
      "displayBuffer": 2,"loadingIndicator": true 
     }, 
     "ajax": {"url": $('#data_table_column_list').attr("url"),"type": 'POST',"data":{'type':subscriber_type,'end_date_from':end_date_from,'end_date_to':end_date_to}}, 
     "columns": JSON.parse($('#data_table_column_list').val().replace(/\'/g, '"')), 
     "columnDefs": [ 
      { "orderable": false, "targets": 2 } 
     ], 
     buttons: [ 
      { 
       extend: 'excelHtml5', 
       text: 'Export selected', 
       exportOptions: { 
        columns: ':visible:not(.not-exported)', 
        modifier: { 
         selected: true 
        } 
       }, 
       title: 'Data export' 
      }, 
      { 
       extend: 'excelHtml5', 
       text: 'Export All', 
       exportOptions: { 
        columns: ':visible:not(.not-exported)' 
       }, 
       title: 'Data export' 
      } 
     ] 
    }); 
}