javascript - twbs分页不显示数据

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的原因不显示数据是因为您的变量 totalPages 的值为 1，根据此 code function :

// 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，否则不会显示任何寻呼机。