Question

我的html标头：

    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
   <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.1/jquery.twbsPagination.min.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

jquery：

function apply_pagination() {
            console.log("apply_pagination called")
            console.log("total pages", totalPages)
            $pagination.twbsPagination({
                totalPages: totalPages,
                visiblePages: 6,
                onPageClick: function (event, page) {
                    displayRecordsIndex = Math.max(page - 1, 0) * recPerPage;
                    endRec = (displayRecordsIndex) + recPerPage;
                    displayRecords = records.slice(displayRecordsIndex, endRec);
                    console.log("i am inside onpageclick");
                    generate_table();
                }
            });
        }

html：

   <div class="container">                                                                               
    <div class="table-responsive">   
    <h2>View Installment Details</h2>     
    <table class="table">
        <tbody id="emp_body">
            <tr>
                <th>Customer ID</th>
            </tr>
            <tr>
                <th>Transaction ID</th>
            </tr>
            <tr>
                <th>First Due Amount</th>
            </tr>
            <tr>
                <th>First Due Date</th>
            </tr>
            <tr>
                <th>Second Due Amount</th>
            </tr>
            <tr>
                <th>Second Due Date</th>
            </tr>
        </tbody>
    </table>
    <div id="pager">
        <ul id="pagination" class="pagination-lg"></ul>
    </div>
    </div>
  </div>

onPageClick内的console.log没有被调用。有什么原因吗？它在我的暂存环境中有效，但在生产环境中无效。

编辑：添加了用于分页的html代码。它在暂存阶段效果很好，但在生产环境中效果不佳。

Answer 1

twbs pagination不显示数据的原因是，根据此code function，变量totalPages的值为1：

// hide if only one page exists
if (this.options.hideOnlyOnePage && this.options.totalPages == 1) {
    if (this.options.initiateStartPageClick) {
        this.$element.trigger('page', 1);
    }
    return this;
}

确保totalPages是>1或它不会显示任何寻呼机。

twbs分页不显示数据

1 个答案: