テーブルにesimakinページネーションをリンクするには？

Question

esimakin jQuery Pagination pluginを使用してテーブルを複数のページに分割しようとしていますが、これはますます増加するデータベースからデータが取得されているためです。しかし、私のページネーションバーにはない：私は次または前のページをクリックし

変更ページへ

1. スプリットテーブル。

アドバイスをいただければ幸いです。

HTML：

<div class="table-responsive"> 
       <div class="form-group pull-right"> 
        <input type="text" id="myInput" onkeyup="filterTable()" class="search form-control" placeholder="Filter Table"> 
       </div> 
       <div class="form-group pull-left"> 
        <a href='#' class="btn btn-sm btn-primary" onClick="loadDraft();">Load Selected</a> 
       </div> 
       <table id="draftTable" class="table table-bordered table-hover table-striped"> 
        <thead> 
         <tr> 
          <th data-field="radio"></th> 
          <th data-field="bulletin_id">Bulletin ID</th> 
          <th data-field="event">Event</th> 
          <th data-field="badge_num">Badge Number</th> 
          <th data-field="AYEAR">Year</th> 
         </tr> 
         <tbody> 
         </tbody> 

        </thead> 

       </table> 

      </div> 
     <ul id="pagination" class="pagination-sm pull-right"></ul> 

    </div> 
</div> 

JS：グーグルで

<script> 
    $(document).ready(function(){ 
     populateTables('S'); 
    }); 

    function populateTables(res){ 
     console.log(res) 
     $.getJSON("bulletinListJSON.asp", {res:res}, function(data){ 
     }).done(function(data) { 
     for (var i=0;i<=data.length;i++){ 
      var draftData = "<tr><td><input type=radio value="+ i + " name=load id=load /></td><td>" + data[i].BULLETIN_ID + "</td><td>" + decodeURIComponent(data[i].EVENT) + "</td><td>" + data[i].BADGE_NUM + "</td><td>" + data[i].AYEAR + "</td></tr>"; 
      $('#draftTable').find('tbody').append(draftData); 

     } 
     }); 
    } 

    function filterTable(event) { 
     var filter = event.target.value.toUpperCase(); 
     var rows = document.querySelector("#draftTable tbody").rows; 

     for (var i = 0; i < rows.length; i++) { 
      var firstCol = rows[i].cells[1].textContent.toUpperCase(); 
      var secondCol = rows[i].cells[2].textContent.toUpperCase(); 
      var thirdCol = rows[i].cells[3].textContent.toUpperCase(); 
      var fourthCol = rows[i].cells[4].textContent.toUpperCase(); 

      if (firstCol.indexOf(filter) > -1 || secondCol.indexOf(filter) > -1 || thirdCol.indexOf(filter) > -1 || fourthCol.indexOf(filter) > -1) { 
       rows[i].style.display = ""; 
      } else { 
       rows[i].style.display = "none"; 
      }  
     } 
    } 
    document.querySelector('#myInput').addEventListener('keyup', filterTable, false); 

    $("#draftTable tr").click(function(){ 
     $(this).addClass('selected').siblings().removeClass('selected');  
     var value=$(this).find('td:second').html(); 
     alert(value);  
    }); 

    $('.ok').on('click', function(e){ 
     alert($("#table tr.selected td:first").html()); 
    }); 

    //Pagination 
     $('#pagination').twbsPagination({ 
      totalPages: 35, 
      visiblePages: 7, 
      items: 20, 
      itemOnPage: 8, 

     }); 


</script> 

Answer 1

twbs-paginationプラグインは、onPageClickコールバックオプションを提供します。それを実装する必要があります。

応答データの長さに基づいてページの総数を動的に設定することもできます。

あなたの状況に基づいて簡単なスニペットからgist。

function setContent(page) { 
    // generate markup to display 
    $('#page-content').html(data[page]); 
} 

$('#pagination').twbsPagination({ 
    totalPages: data.length, // from $.ajax response 
    visiblePages: 7, 
    onPageClick: function (event, page) { 
    setContent(page); 
    } 
}); 

Answer 2

検索： JQのDataTableの

ワリー素敵なテーブル。 検索、ダウンロード（Excel、Word、pdf）、注文欄、サーバー側、cliend側の実行、もっと....

İmこれを使用してください。 1,500万行