Javascript 如何将esimakin分页与我的表格链接？

我正试图使用将表拆分为多个页面，因为它从不断增长的数据库中获取数据。但是，我的分页栏不：

将表拆分为多页

单击“下一步”或“上一步”时更改页面

任何建议都将不胜感激

HTML:

公告ID
事件
警察编号
年

JS:

$（文档）.ready（函数（）{
populateTables（'S'）；
});
函数populateTables（res）{
console.log（res）
$.getJSON（“bulletinListJSON.asp”，{res:res}，函数（数据）{
}).完成（功能（数据）{
对于（变量i=0；i-1 | |第二列索引（过滤器）>-1 | |第三列索引（过滤器）>-1 | |第四列索引（过滤器）>-1）{
行[i].style.display=“”；
}否则{
行[i].style.display=“无”；
}      
}
}
document.querySelector（“#myInput”）.addEventListener（'keyup'，filterTable，false）；
$（“#draftTable tr”）。单击（函数（）{
$（this）.addClass（'selected'）.sides（）.removeClass（'selected'）；
var value=$（this.find（'td:second'）.html（）；
警报（值）；
});
$（'.ok'）。在（'click'，函数（e）上{
警报（$（“#table tr.selected td:first”）.html（）；
});
//分页
$（“#分页”）.twb分页({
总页数：35，
浏览网页：7，
项目：20，
第8页，
});

在谷歌搜索： jq数据表

我们的桌子很好。 搜索，下载（Excel，word，pdf），订单栏，服务器端或客户端运行，更多

---

İm使用这个.1500万行。

twbs分页插件提供了一个

onPageClick

回调选项；您需要实现它

您还可以根据响应数据的长度动态设置页面总数

根据您的情况，从一个简单示例中提取一个片段

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

<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>

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