Bootstrap pagination with dynamic content?

Question

I need to be able to paginate a table in my bootstrap modal.

The problem I'm having is that I build the table rows dynamically.

The code which builds up the table rows.

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

How do I add pagination to my table? I would like to be able to limit one page to 20 table rows?

Here's my 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

Is there a reason you cannot use a framework that does this for you? jQuery Datatables does all of this for you.