動的コンテンツを含むブートストラップページング？

Question

私はブートストラップモーダルでテーブルを改ページできる必要があります。

私が抱える問題は、テーブルの行を動的に構築することです。

テーブル行を構築するコード。

function getValidTags(){ 
    var ruleID = $('.ruleID').val(); 

    $.ajax({ 
    url: '/ajax/getValidTags.php', 
    type: 'POST',   
    data: { 
     ruleID: ruleID, 
    }, 
    }) 
    .done(function(data) {  
    $.each(data, function(validName, afCount) { 
     var newValidRow = '<tr>'+ 
     '<td>'+validName+'</td><td>'+afCount+' Autofixes</td><td><button type="button" class="btn btn-primary btn-sm"><i class="fa fa-cog"></i></button> <button type="button" class="btn btn-danger btn-sm">Delete</button>'+ 
     '</tr>'; 
     $('.validTagsTable').append(newValidRow);   
    }); 
    }) 
} 

どのように私は私のテーブルに改ページを追加するには？ 1ページを20行に制限できますか？

は、ここに私のHTML

  <table class="table table-striped table-condensed"> 
      <thead> 
       <tr> 
        <th>Tag Name</th> 
        <th>Autofixes</th> 
        <th>Manage</th> 
       </tr> 
      </thead> 
      <tbody class="validTagsTable"> 
      </tbody>      
     </table> 
     <div class="col-md-4"></div> 
     <div class="col-md-4"> 
      <nav> 
       <ul class="pagination"> 
       <li> 
        <a href="#" aria-label="Previous"> 
        <span aria-hidden="true">&laquo;</span> 
        </a> 
       </li> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
       <li><a href="#">3</a></li> 
       <li><a href="#">4</a></li> 
       <li><a href="#">5</a></li> 
       <li> 
        <a href="#" aria-label="Next"> 
        <span aria-hidden="true">&raquo;</span> 
        </a> 
       </li> 
       </ul> 
      </nav>      
     </div>  

Answer 1

あなたはあなたのためにこれを行うフレームワークを使用することはできません理由があるのか​​？ jQuery Datatablesはこれをすべて行います。