Unable to get next page in pagination

Question

I have created simple pagination with next and previous buttons. My pagination is not working.

$(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);
    }
});
});

I dont know what went wrong.please refer this fiddle https://jsfiddle.net/tt5Lr2a2/

Please add code into the question - people shouldn't have to click away to be able to help - create a code snippet instead of/as well as a fiddle — StudioTime, Mar 27 '17 at 06:38
Working code at JSFiddle is good but make sure to post relevant code to StackOverflow question as well. — Yeldar Kurmangaliyev, Mar 27 '17 at 06:39
Also add static data instead of db call in order to help others to help you.. — Koustav Ray, Mar 27 '17 at 06:40
Put your code in here please, and make sure you're only showing us the relevant code required to still reproduce the problem, but not ALL of your code. Off the bat, this will be hard for us to reproduce because we can't get your database records, therefore our table will always be empty. Maybe you can also (next to posting the code here) provide us with a link to your live project, if it's live anywhere. Furthermore, off the bat, I see you're calling a function NoData() when no data is returned (which will always happen for us) but this function does not exist, resulting in a ReferenceError. — Laurens Swart, Mar 27 '17 at 06:41
All please check my second fiddle.I am trying to implement that with ajax In my first fiddle. — krish, Mar 27 '17 at 06:55
https://jsfiddle.net/tt5Lr2a2/ fiddle with data here only am trying to implement pagination — krish, Mar 27 '17 at 07:42

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

There is no ajax call in your fiddle that is called in the function pagination(). therefore your data is never refreshed. Also The entire implementation in the fiddle seems flawed. Please refer to some example like the following for properly implementation of pagination: How to use SimplePagination jquery

or Refer to some pagination library like:

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

[EDIT]

Try Manipuating your AJAX call with something like this:

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
    });
}

edited May 23 '17 at 12:01

Community

1
1

answered Mar 27 '17 at 06:46

Koustav Ray

1,112
13
26

I can implement it without ajax call easily https://jsfiddle.net/Lyv983yg/ .I am trying with ajax call. – krish Mar 27 '17 at 06:52
Exactly my point,Please make the ajax call on every click of next or previous button and send the appropriate `start_Index` and `end_Index` for the same. On your server side,receive these in order to send relevant data from your database in the server's response – Koustav Ray Mar 27 '17 at 06:57
Sorry I din't get you. – krish Mar 27 '17 at 07:03

Unable to get next page in pagination

1 Answers1