logo标签列表

使用动态内容的Bootstrap分页？

jqueryhtmltwitter-bootstrappagination
4
我需要能够在我的Bootstrap模态框中分页表格。问题是我动态构建表格行。
构建表格行的代码如下。
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>
你可以使用dataTables插件来简化生活。下面的答案为您提供了链接。不要犹豫，使用它吧。你会喜欢它的。 - Rajshekar Reddy
1个回答
1

您是否有无法使用可以为您完成此操作的框架的原因？ jQuery Datatables 可以为您完成所有这些操作。

我从未使用过这个，需要花费一些时间来适应吗？ - Kieron606
不，完全不是。它是最受欢迎的库之一，但也有其他选择。它们有一个零配置选项，只需一行代码即可获得最常见的功能。如果需要，可以覆盖所有内容以满足您的要求。与手动实现分页相比，配置所需的时间肯定会更少！ - John Mc
我该如何将它实现到我的ajax中？我有样式表和脚本，但无法使其工作。$('.valid-tags').DataTable( { "processing": true, "serverSide": true, "ajax": { "url": "/ajax/getValidTags.php", "type": "POST" }, "columns": [ { "data": "tag_name" }, { "data": "af_count" } ] } ); - Kieron606
文档非常好，您在S.O.上找到答案时不会遇到任何问题。https://datatables.net/examples/data_sources/ajax.html - John Mc
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接