Jqueryを使用してテーブルにビッグリストをレンダリングする

Question

私は大きなリストを持っています。私は500のサイズにグルーピングしています。私は、次のJavaスクリプトコードを使用してリストをテーブルにレンダリングしています。

var counter; 
 

 
$(document).ready(function() { 
 
    var table = $('#example').DataTable(); 
 
    $('#example tbody').on('click', 'tr', function() { 
 
    $(this).toggleClass('selected'); 
 
    }); 
 

 
    $('#button').click(function() { 
 
    alert(table.rows('.selected').data().length + ' row(s) selected'); 
 
    }); 
 
}); 
 

 
function getData(submit) { 
 
    var pointer; 
 
    var msg = ""; 
 
    var company = ""; 
 

 
    if (submit == 1) { 
 
    //On click of get more 
 
    counter += 500; 
 
    pointer = counter; 
 
    
 
    } else { 
 
    //On load 
 
    counter = 500; 
 
    pointer = 500; 
 
    } 
 

 
    $.ajax({ 
 
    type: "GET", 
 
    url: "/biz/getListOfFreeMembers", 
 
    data: { 
 
     limit: pointer 
 
    }, 
 
    success: function(data) { 
 
     $.each(data, function(i, obj) { 
 
     var t = $('#example').DataTable(); 
 
     t.row.add([ 
 
      obj.companyName, 
 
      obj.mobileNo, 
 
      obj.companyWebsite, 
 
      obj.firstName, 
 
      obj.address, 
 
      obj.createDate 
 
     ]).draw(); 
 
     }); 
 
    }, 
 
    error: function(e) { 
 
     alert("error" + e.Message); 
 
    } 
 
    }); 
 
}

<link href="//cdn.datatables.net/1.10.15/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.15/js/jquery.dataTables.min.js"></script> 
 
<div id="demo" class="col-sm-12"> 
 
    <div class="table-responsive"> 
 
    <table id="example" class="table"> 
 
     <thead> 
 
     <tr> 
 
      <th>Company Name</th> 
 
      <th>Mobile Number</th> 
 
      <th>Website</th> 
 
      <th>Person Name</th> 
 
      <th>Address</th> 
 
      <th>Date of Creation</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody id="list_of_users"> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div> 
 
<a href="javascript:getData('1')">Get more data</a>

の表は、最初に正しくレンダリングされますが、私が得るより多くのデータリンクをクリックしたときに、データの新しいセットは、新しいセットの代わりに、既存のセットに追加されていませんより多くのデータを取得するために各クリックごとに最初に表示され、次に古いセットなどが表示されます。新しいデータセットをテーブルの古いデータセットに追加する方法を提案してください。ありがとうございました。

Answer 1

コードは正常に動作しています。 (check this codePen)

• は、あなたが不足しているとすることができ、そのページ番号が増加している

• （つまり新しいデータが次のページで起こっている）またはあなたのサービスは、ネットワークコンソールをチェックします（データを応答していないかもしれませ）

var counter=0; 
 
var t=null; 
 
var url = 'tableData'; 
 
$(document).ready(function() { 
 
    t = $('#example').DataTable(); 
 
    t 
 
    .column('0:visible') 
 
    .order('') 
 
    .draw(); 
 
    
 
    $('#example tbody').on('click', 'tr', function() { 
 
    $(this).toggleClass('selected'); 
 
    }); 
 

 
    $('#button').click(function() { 
 
    alert(t.rows('.selected').data().length + ' row(s) selected'); 
 
    }); 
 

 
    
 
getData(); 
 
}); 
 

 
function getData(submit) { 
 
    $('#loading').show(); 
 
    var pointer=0; 
 
    var msg = ""; 
 
    var company = ""; 
 

 
    if (submit == 1) { 
 
    //On click of get more 
 
    counter += 500; 
 
    pointer = counter; 
 

 
    url = 'tableData2'; 
 

 
    } else { 
 
    //On load 
 
    counter = 500; 
 
    pointer = 500; 
 

 
    url = 'tableData'; 
 
    } 
 

 

 
    $.ajax({ 
 
    contentType: "application/json", 
 
    type: "GET", 
 
    url: "http://demo2315600.mockable.io/" + url, 
 
    success: function(data) { 
 
     $('#loading').hide(); 
 
     //alert('asd'); 
 
     $.each(data, function(i, obj) { 
 
     t.row.add([ 
 
      obj.companyName, 
 
      obj.mobileNo, 
 
      obj.companyWebsite, 
 
      obj.firstName, 
 
      obj.address, 
 
      obj.createDate 
 
     ]).draw(); 
 
     }); 
 
    }, 
 
    error: function(e) { 
 
     alert("error" + e.Message); 
 
    } 
 
    }); 
 
}

<link href="//cdn.datatables.net/1.10.15/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.15/js/jquery.dataTables.min.js"></script> 
 
<div id="demo" class="col-sm-12"> 
 
    <div class="table-responsive"> 
 
    <table id="example" class="table"> 
 
     <thead> 
 
     <tr> 
 
      <th>Company Name</th> 
 
      <th>Mobile Number</th> 
 
      <th>Website</th> 
 
      <th>Person Name</th> 
 
      <th>Address</th> 
 
      <th>Date of Creation</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody id="list_of_users"> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div> 
 
<a href="javascript:getData('1')">Get more data</a> 
 

 
<span id="loading" style="display:none;">pleas wait Load Data</span>