使用动态内容引导分页？

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

如何为表格添加分页功能？我希望能够将一页限制为 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 为您完成所有这些工作。