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

[编辑]

尝试使用以下内容操作您的AJAX调用：

UIImageView

无法在分页中获得下一页

1 个答案: