Javascript 每页添加项目选项_Javascript_Html_Jquery_Ajax

Javascript 每页添加项目选项

javascript html jquery ajax

Javascript 每页添加项目选项,javascript,html,jquery,ajax,Javascript,Html,Jquery,Ajax,如何在列表页面中添加一个选项，如“每页有限制的项目”（带有选项10、25、50的下拉列表）。它应该类似于引导数据表中的显示条目选项。我正在使用twbspagination.js进行分页。这是示例链接，下面给出的是源代码 <body> <div class="container" style="padding:10px 20px;"> <h2>Pagination Example Using jQuery&l

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

<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>


使用jQuery的分页示例
名称
薪水
年龄

$（文档）.ready（函数（）{
var$pagination=$（“#pagination”），
totalRecords=0，
记录=[]，
displayRecords=[]，
recPerPage=10，
第页=1，
总页数=0；
$.ajax({
url:“https://www.js-tutorials.com/source_code/api_data/employee_all.php",
async:true，
数据类型：“json”，
成功：功能（数据）{
记录=数据；
控制台日志（记录）；
totalRecords=records.length；
totalPages=Math.ceil（totalRecords/recPerPage）；
应用分页（）；
}
});
函数生成_表（）{
var-tr；
$（'#emp_body'）.html（''）；
对于（变量i=0；i

您可以通过以下步骤完成此操作：

1）在ui中添加一个下拉列表，显示每页的记录，如下所示：

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

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

那应该对你有好处

您还可以通过替换以下内容来设置

recPerPage

的默认值：

recPerPage=10，

为此：

recPerPage=$（'#recPerPage'）.val（），

更新：

您正在使用的分页插件具有

及

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

我认为上面的内容应该对您有所帮助。

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