帶動態內容的Bootstrap分頁？

我需要能夠在我的引導模式中對錶格進行分頁。帶動態內容的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>

來源

2016-04-08 Kieron606

您可以通過使用dataTables插件讓您的生活更輕鬆。下面的答案爲您提供了鏈接..不要猶豫，使用它..你會愛上它 –

有不能使用的框架，這是否對你的理由？ jQuery Datatables爲你做這一切。

來源

2016-04-08 10:27:35

我從來沒有用過這個，需要一段時間才能習慣嗎？ – Kieron606

根本沒有。它是我們那裏最受歡迎的圖書館之一，但也有其他選擇。他們有一個零配置選項，其中一行代碼爲您提供最常用的功能。如果需要，一切都可以被覆蓋以符合您的要求。這肯定會讓你花費更少的時間來配置，而不是手動實現分頁！ –

我如何將它實現到我的ajax？我有樣式表和腳本，但我無法使它工作？ '（'。valid-tags'）。DataTable（{「處理」：true，「serverSide」：true，「ajax」：{ 「url」：「/ajax/getValidTags.php」，「類型「：」POST「 }，」列「：[ { 」數據「：」TAG_NAME「}， { 」數據「：」af_count「} ] }）;' – Kieron606

帶動態內容的Bootstrap分頁？

回答

相關問題