Bootstrap-Paginierung mit dynamischem Inhalt?

Question

Ich muss in der Lage sein, eine Tabelle in meinem Bootstrap-Modal zu paginieren.

Das Problem, das ich habe, ist, dass ich die Tabellenzeilen dynamisch erstellen.

Der Code, der die Tabellenzeilen aufbaut.

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);   
    }); 
    }) 
} 

Wie füge ich Paginierung zu meiner Tabelle hinzu? Ich möchte eine Seite auf 20 Tabellenzeilen beschränken können?

Hier ist mein 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

Gibt es einen Grund, warum Sie nicht einen Rahmen verwenden können, die dies für Sie tut? jQuery Datatables macht das alles für Sie.