Javascript/jquery jQueryを使用して追加されたtdにページ番号を追加する

Question

ページが読み込まれているときに非表示になっていて、データが入っていないテーブルがあります。 ユーザーがボタンをクリックすると、テーブルが作成され、最後に表示されます。

tr = $('<tr/>'); 
tr.append("<td>somedata here</td>"); 
$('#mytable').append(tr); 
$('#mytable').show(); 

、ここではテーブルです：

<table id="mytable" class="table table-striped table-bordered" style="display:none"> 
     <thead> 
     <tr> 
      <th>Data below</th> 
     </tr> 
     </thead> 

     <tbody> 
     </tbody> 
    </table> 

私の問題は、私はDataTableのプラグインなど、たくさんのを試したし、彼らは動作しないということである。このよう 。 私は、プラグインを動作させる方法を見つけるか、または私がテーブルに値を設定する方法で動作するページネーションの方法を見つける必要があります。

どうすればいいですか？

Answer 1

datatableを使用できます。それは自動的にここで改ページ

を処理するデモ働いている：あなたは `tbody`外` tr`を追加するように見える

$(document).ready(function() { 
 
    $('#example').DataTable(); 
 
    var dataTable = $("#example").dataTable().api(); 
 
    $("#addRow").click(function() { 
 
    tr = document.createElement("tr"); 
 
    tr.innerHTML = "<tr><td>New row </td><td>Test</td><td>45</td></tr>"; 
 
    dataTable.row.add(tr); 
 
    dataTable.draw(); 
 
    }); 
 
});

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 
 
<script src="//code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 

 
<table id="example" class="display" width="100%" cellspacing="0"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Position</th> 
 
     <th>Age</th> 
 
    </tr> 
 
    </thead> 
 
    <tfoot> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Position</th> 
 
     <th>Age</th> 
 
    </tr> 
 
    </tfoot> 
 
    <tbody> 
 
    <tr> 
 
     <td>Tiger</td> 
 
     <td>System Architect</td> 
 
     <td>61</td> 
 
    </tr> 
 
    <tr> 
 
     <td>John deo</td> 
 
     <td>System Architect</td> 
 
     <td>61</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Jane Deo</td> 
 
     <td>System Architect</td> 
 
     <td>61</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<button id="addRow">Add Row</button>