Question

我正在尝试使用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>

Answer 1

在谷歌搜索： jq dataTables

很好的桌子。搜索，下载（Excel，word，pdf），订单栏，服务器端或cliend side run，等等......

mm使用这个。 1500万行。

Answer 2

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

如何将esimakin分页与我的桌子联系起来？

2 个答案: