每页添加项目选项答案

【问题标题】：Add Items per page option每页添加项目选项
【发布时间】：2020-09-27 16:03:35
【问题描述】：

如何在列表页面中添加一个选项，例如每页带有限制的项目（带有选项 10、25、50 的下拉菜单）。它应该类似于引导数据表中的 show entries 选项。我正在使用 twbspagination.js 进行分页。这是示例链接js-tutorials，下面是源代码。

<body>
  <div class="container" style="padding:10px 20px;">
    <h2>Pagination Example Using jQuery</h2>
    
    <table id="employee" class="table table-bordered table table-hover" cellspacing="0" width="100%">
        <colgroup><col width="20%"><col width="35%"><col width="40%"></colgroup>
    <thead>
        <tr>
            <th>Name</th>
            <th >Salary</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody id="emp_body">
    </tbody>
    </table>
    <div id="pager">
        <ul id="pagination" class="pagination-sm"></ul>
    </div>
    
  </div>
</body>
<script type="text/javascript">
  $(document).ready(function(){
    
    var $pagination = $('#pagination'),
        totalRecords = 0,
        records = [],
        displayRecords = [],
        recPerPage = 10,
        page = 1,
        totalPages = 0;
           
    $.ajax({
        url: "https://www.js-tutorials.com/source_code/api_data/employee_all.php",
        async: true,
        dataType: 'json',
        success: function (data) {
            records = data;
            console.log(records);
            totalRecords = records.length;
            totalPages = Math.ceil(totalRecords / recPerPage);
            apply_pagination();
        }
    });
    function generate_table() {
        var tr;
        $('#emp_body').html('');
        for (var i = 0; i < displayRecords.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + displayRecords[i].employee_name + "</td>");
            tr.append("<td>" + displayRecords[i].employee_salary + "</td>");
            tr.append("<td>" + displayRecords[i].employee_age + "</td>");
            $('#emp_body').append(tr);
        }
    }
    function apply_pagination() {
        $pagination.twbsPagination({
            totalPages: totalPages,
            visiblePages: 6,
            onPageClick: function (event, page) {
                displayRecordsIndex = Math.max(page - 1, 0) * recPerPage;
                endRec = (displayRecordsIndex) + recPerPage;
                console.log(displayRecordsIndex + 'ssssssssss'+ endRec);
                displayRecords = records.slice(displayRecordsIndex, endRec);
                generate_table();
            }
        });
    }
  });
</script>

【问题讨论】：

标签： javascript html jquery ajax

【解决方案1】：

您可以通过以下步骤做到这一点：

1) 在您的用户界面中添加一个下拉菜单，显示每页的记录，如下所示：

<select id="recPerPage" onchange="apply_pagination();">    
<option value="5">5</option>    
<option value="10" selected='selected'>10</option>    
<option value="20">20</option>    
</select>

您可以根据您的用户界面偏好将其添加到表格上方或下方。

请注意下拉菜单应该触发函数apply_paginationonchange。我添加了内联事件处理仅供参考。你应该通过addEventListner

2) 在您的代码中，function apply_pagination() 应该在开头得到recPerPage 下拉列表的当前值，如下所示：

`recPerPage = $('#recPerPage').val();`

这应该可以为您解决问题。

您还可以通过替换此设置为recPerPage 设置默认值：

recPerPage = 10,

用这个：

recPerPage = $('#recPerPage').val(),

更新：

您使用的分页插件有一个correct/updated version linked here

和

它有动态总页数问题documented here，查找标题“动态总页数”

我认为以上应该对你有所帮助。

【讨论】：

无法正常工作。像您提到的那样更改代码后，当我单击第 2 页等时，将显示整个数据而不是下一组数据。
好吧，我建议的逻辑是将 10 的硬编码替换为从 ui 中动态的 recPerPage，因此它原则上应该可以工作。能不能在相关的地方调试得到recPerPage的值