ページングで次のページを取得できません

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

私は、機能ページネーション（で呼び出され、あなたのフィドルにはAJAX呼び出しが）ありません。このフィドル https://jsfiddle.net/tt5Lr2a2/

Answer 1

を参照してくださいwrong.please行ったものを知りません。したがって、データは決してリフレッシュされません。また、フィドル全体の実装に欠陥があるようです。 How to use SimplePagination jquery

かのようないくつかのページネーションライブラリを参照してください：

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

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

[EDIT]

てみManipuatingページネーションの適切な実装のために、次のようないくつかの例を参照してくださいあなたの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 
    }); 
}