Datatable Deferloading 1000行中10行

Question

私はAPIに1000個のアカウントを返します。 私の目標は、最初の10行だけを読み込み、さらにロードすることです - ユーザーがnextをクリックした場合。

---

HTML

テーブル

<table id="example" class="display" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>Account ID</th> 
      <th>Name</th> 
      <th>Email</th> 
     </tr> 
    </thead> 
</table> 

---

JS

＃1

confにしてみてください

$('#example').DataTable({ 
     "bPaginate": true, 
     "processing": true, 
     "serverSide": true, 
     ajax: { 
      url: 'http://localhost:8888/api/account_index', 
      dataSrc: 'data' 
     }, 
     columns: [ 
      { data: 'account_id' }, 
      { data: 'name' }, 
      { data: 'email' } 
     ], 
     "deferRender": true, 
     "deferLoading": 10 <----- 
    }); 

---

IG私は＃2

設定

を試してみてください

---

を得ました0

$('#example').DataTable({ 
     "bPaginate": true, 
     "processing": true, 
     "serverSide": true, 
     ajax: { 
      url: 'http://localhost:8888/api/account_index', 
      dataSrc: 'data', 
      deferLoading: 10 <----- 

     }, 
     columns: [ 
      { data: 'account_id' }, 
      { data: 'name' }, 
      { data: 'email' } 
     ], 
     "deferRender": true 

    }); 

---

私はすべて1000年のアカウント今少しこだわっ

---

を列挙されてしまった、この上の任意の洞察力は非常に高く評価されます！

Answer 1

データをmyjson.comにコピーし、データ表1.10.12を使用しました。それは動作するようです。以下のスニペット。あなたが一度に10個のレコードを表示したい場合は、長さを設定する必要が

$('#example').DataTable({ 
 
     ajax: { 
 
      url: 'https://api.myjson.com/bins/13ahl', 
 
      //dataSrc: 'data' 
 
     }, 
 
     columns: [ 
 
      { data: 'account_id' }, 
 
      { data: 'name' }, 
 
      { data: 'email' } 
 
     ], 
 
    });

<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 
<table id="example" class="display" cellspacing="0" width="100%"> 
 
    <thead> 
 
     <tr> 
 
      <th>Account ID</th> 
 
      <th>Name</th> 
 
      <th>Email</th> 
 
     </tr> 
 
    </thead> 
 
</table>

Answer 2

。 以下のmwntioned属性を追加してください。

「iDisplayLength」：10