无法在分页中获取下一页

Question

我用next 和previous 按钮创建了简单的分页。 我的分页不起作用。

$(document).ready(function () {
    empRoles()
    var table = $('#myTable');
    var sta = 0;
    var pageNum = 1;
    var elements_per_page = 3;
    var roleList;
    var limit = elements_per_page;

    $('#newroleName,#searchroleName').focus(function () {
        $('.requiredField').hide();
        $('#newroleName').removeClass('error');
    });
    $('.searchClear').click(function () {
        $('.requiredField').hide();
        $('#searchroleName').removeClass("error");
        $('#searchroleName').val("");
       empRoles()
    });


function empRoles() {
   
            pagination(roleList)
           
                $('#content').html('');
                for (var i = sta; i < limit; i++) {
                    var table = '<tr  id="' + roleList[i].Id + '"><td>' + (i + 1) + '</td><td class="roleName" id="name' + i + '">' + roleList[i].name + '</td><td><button  class="btn edit btn-info btn-sm" id="edit' + i + '"><i class="fa fa-pencil"></i>Edit</button><button  class="btn update btn-success btn-sm" id="update' + i + '"><i class="fa fa-floppy-o"></i>Update</button><button class="btn dlt btn-danger btn-sm" onclick="deleteRow(this)" data-dismiss="modal" id="dlt' + i + '"><i class="fa fa-trash-o"></i>Delete</button><button class="btn editCancel btn-danger btn-sm" id="editCancel' + i + '" ><i class="fa fa-times"></i>Cancel</button></td><tr>';
                    $('#content').append(table);
                    editUpdate();
                }
    
}
function pagination(starting_row,max_size) {
    
    var max_size = roleList.length;
       $('.paginationList').append('<input type="text" class="btn col-lg-11 col-md-11 col-xs-12" id="pageNo" readonly="readonly">');
    $('.paginationList input').val(pageNum);
    
}
$(document).on('click', "#nextValue", function () {
    debugger
    var max_size = roleList.length;
    var starting_row = limit;
    if (max_size >= starting_row) {
        pageNum = eval(pageNum + 1);
        ending_row = limit + elements_per_page;
        limit = ending_row
        table.empty();
        if (limit > max_size) {
            ending_row = max_size;
        }
        $('.paginationList input').val(pageNum);
        pagination(starting_row, ending_row);
    }

});
$(document).on('click', "#PreValue", function () {
    var max_size = roleList.length;
    var pre = limit - (2 * elements_per_page);
    if (pre >= 0) {
        pageNum = eval(pageNum - 1);
        limit = limit - elements_per_page;
        table.empty();
        $('.paginationList input').val(pageNum);
        pagination(pre, limit);
    }
    if (pre < 0 && pageNum != 1) {
        var pre = limit;
        limit = (pageNum * 2) + (limit - 1);
        table.empty();
        $('.paginationList input').val(pageNum);
        pagination(pre, limit);
    }
});
});

我不知道出了什么问题。请参考这个小提琴 https://jsfiddle.net/tt5Lr2a2/

Answer 1

您的小提琴中没有在函数 pagination() 中调用的 ajax 调用。因此您的数据永远不会刷新。此外，小提琴中的整个实现似乎存在缺陷。请参考以下示例以正确实现分页：How to use SimplePagination jquery

或参考一些分页库，如：

https://github.com/infusion/jQuery-Paging

https://github.com/infusion/jQuery-Paging

[编辑]

尝试使用以下方式操作您的 AJAX 调用：

pagination(starting_row,ending_row)
{

    $.ajax({
      url: "your_server_url",
      method: "POST",
      data: { startIndex: starting_row, endIndex: ending_row }
    }).done(function() {
      //execute rest of your DOM manipulation Code
    });
}