Dynamic Table pagination

Question

Pagination is working correctly in my code.But next and previous buttons are working separately.When I visit last page directly ,if i click previous button it should display previous page.But I did some mistake in my code Can anybody point out that?

JSFiddle

$(document).ready(function(){
                var table =  $('#myTable');
                var max_size=userDetails.length;
                var sta = 0;
                var pageNum=1;
                var elements_per_page = 3;
                var limit = elements_per_page;
                 $('.paginationList').append('<input type="text" class="btn col-lg-11 col-md-11 col-xs-12" id="pageNo">');
                 $('.paginationList input').val(pageNum);
                pagination(sta,limit);
                $('#nextValue').click(function(){
                    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);
                    }
                });
                  $('#PreValue').click(function(){
                    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); 
                    }
                });
                $('#go').click(function(){
                   var displayPage=$('#pageNo').val();
                   pageNum=displayPage;
                   var ending_row=displayPage*elements_per_page;
                   var starting_row=ending_row-elements_per_page;
                   table.empty();
                   {
                    $('.paginationList input').val(pageNum);
                        pagination(starting_row,ending_row);
                    }
                 }); 
                 $('#lastPage').click(function(){
                    pageNum=Math.round(max_size/limit);
                    var ending_row=max_size;
                    var starting_row=Math.round(max_size/limit)*limit;
                    table.empty();
                  {
                    $('.paginationList input').val(pageNum);
                        pagination(starting_row,ending_row);
                    }
                 }); 
                 $('#firstPage').click(function(){
                    pageNum=pageNum;
                    var starting_row=sta;
                    var ending_row=elements_per_page;
                    table.empty();
                  {
                    $('.paginationList input').val(pageNum);
                        pagination(starting_row,ending_row);
                    }
                 });
});

function pagination(sta,limit){
console.log(sta,limit);
    for(var i=sta;i<limit;i++){
    var tab='<tr id="row'+i+'"><td>'+userDetails[i].Sno+"\n"+'</td><td>'+userDetails[i].empId+"\n"+'</td><td>'+userDetails[i].Firstname+"\n"+'</td><td>'+userDetails[i].email+"\n"+'</td><td>'
              +userDetails[i].phone+"\n"+'</td><td>'+userDetails[i].designation+"\n"+'</td><td>'+userDetails[i].projectAllocated+"\n"+'</td><td><button class="btn btn-info btn-xs edit" data-toggle="modal"  data-target="#myModal" data-html="true">'+
              userDetails[i].edit +'</button><button class="btn btn-warning  btn-xs dlt">'+userDetails[i].remove +'</button></td></tr>';

     $('#myTable').append(tab)
}
}

Answer 1

var userDetails=[
{
"Sno":"1",
"empId":"Emp001122",
"name":"john",
"email":"john@fusiongts.com",
"phone": "9876543210",
"designation":"designer",
"projectAllocated":"xxx",
"edit":"Edit",
"remove":"Delete"
},
{
"Sno":"2",
"empId":"Emp002233",
"name":"mano",
"email":"mano@fusiongts.com",
"phone": "9876543210",
"designation":"developer",
"projectAllocated":"yyy",
"edit":"Edit",
"remove":"Delete"
},
{
"Sno":"3",
"empId":"Emp001144",
"name":"justin",
"email":"justin@fusiongts.com",
"phone": "9876543210",
"designation":"HR",
"projectAllocated":"zzz",
"edit":"Edit",
"remove":"Delete"
},
{
"Sno":"4",
"empId":"Emp001166",
"name":"guna",
"email":"guna@fusiongts.com",
"phone": "9876543210",
"designation":"designer",
"projectAllocated":"ggg",
"edit":"Edit",
"remove":"Delete"
},
{
"Sno":"5",
"empId":"Emp001122",
"name":"john",
"email":"john@fusiongts.com",
"phone": "9876543210",
"designation":"designer",
"projectAllocated":"xxx",
"edit":"Edit",
"remove":"Delete"
},
{
"Sno":"6",
"empId":"Emp002233",
"name":"mano",
"email":"mano@fusiongts.com",
"phone": "9876543210",
"designation":"developer",
"projectAllocated":"yyy",
"edit":"Edit",
"remove":"Delete"
},
{
"Sno":"7",
"empId":"Emp001144",
"name":"justin",
"email":"justin@fusiongts.com",
"phone": "9876543210",
"designation":"HR",
"projectAllocated":"zzz",
"edit":"Edit",
"remove":"Delete"
}
];

$(document).ready(function(){
                var table =  $('#myTable');
                var max_size=userDetails.length;
                var sta = 0;
                var pageNum=1;
                var elements_per_page = 3;
                var limit = elements_per_page;
                 $('.paginationList').append('<input type="text" class="btn col-lg-11 col-md-11 col-xs-12" id="pageNo">');
                 $('.paginationList input').val(pageNum);
                pagination(sta,limit);
                $('#nextValue').click(function(){
                    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);
                    }
                });
                  $('#PreValue').click(function(){
                    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); 
                    }
                });
                $('#go').click(function(){
                   var displayPage=$('#pageNo').val();
                   pageNum=displayPage;
                   var ending_row=displayPage*elements_per_page;
                   var starting_row=ending_row-elements_per_page;
                   table.empty();
                   //{
                    $('.paginationList input').val(pageNum);
                    pagination(starting_row,ending_row);
                    //}
                 }); 
                 $('#lastPage').click(function(){
                    pageNum=Math.round(max_size/limit);
                    var ending_row=max_size;
                    var starting_row=Math.round(max_size/limit)*limit;
                    table.empty();
                  {
                    $('.paginationList input').val(pageNum);
                        pagination(starting_row,ending_row);
                    }
                 }); 
                 $('#firstPage').click(function(){
                    pageNum=pageNum;
                    var starting_row=sta;
                    var ending_row=elements_per_page;
                    table.empty();
                  {
                    $('.paginationList input').val(pageNum);
                        pagination(starting_row,ending_row);
                    }
                 });
});


var max_size=userDetails.length;


function pagination(sta,limit){
console.log(sta,limit);
    for(var i=sta;i<limit;i++){
    var tab='<tr id="row'+i+'"><td>'+userDetails[i].Sno+"\n"+'</td><td>'+userDetails[i].empId+"\n"+'</td><td>'+userDetails[i].Firstname+"\n"+'</td><td>'+userDetails[i].email+"\n"+'</td><td>'
              +userDetails[i].phone+"\n"+'</td><td>'+userDetails[i].designation+"\n"+'</td><td>'+userDetails[i].projectAllocated+"\n"+'</td><td><button class="btn btn-info btn-xs edit" data-toggle="modal"  data-target="#myModal" data-html="true">'+
              userDetails[i].edit +'</button><button class="btn btn-warning  btn-xs dlt">'+userDetails[i].remove +'</button></td></tr>';

     $('#myTable').append(tab);

}
}

Try this code...I hope this may help you and will fix your problem