如何将 esimakin 分页与我的表格联系起来？答案

【问题标题】：How to link esimakin pagination with my table?如何将 esimakin 分页与我的表格联系起来？
【发布时间】：2017-06-23 16:17:21
【问题描述】：

我正在尝试使用esimakin jQuery Pagination plugin 将我的表格分成多个页面，因为它正在从不断增长的数据库中获取数据。但是我的分页栏没有：

将表格分页
单击下一个或上一个时更改页面。

任何建议将不胜感激。

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>

【问题讨论】：

标签： javascript jquery html pagination

【解决方案1】：

在谷歌搜索： jq 数据表

非常漂亮的桌子。搜索、下载（Excel、word、pdf）、订单栏、服务器端或客户端运行，更多...

我用这个。 1500 万行。

【讨论】：

【解决方案2】：

twbs-pagination 插件提供了一个onPageClick 回调选项；你需要实现它。

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

根据您的情况，来自简单的gist 的 sn-p。

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

【讨论】：