【发布时间】：2020-03-11 15:26:54
【问题描述】：
我已经使用 PHP 服务器页面以 JSON 形式接收表格行数据，并在每个新的搜索条件显示新表格时收到 JSON 表格行。但问题是当我有更多行数时，我想对其进行分页并允许用户选择他想要查看的行数，例如 10、20、30。
简而言之，我想达到以下结果：
如果行数为 200 并且用户希望一次查看 25 行，则 200/25 表示（上一个 1->2->3->4.....->8 下一个）8 个数字显示在表格的顶部，允许用户跳转到所需的页面并查看行。
更新：您可以在下面的答案中查看我的最新作品。
我在loadtable.js 文件中尝试了以下内容，如下所示。我还附加了我的服务器端 PHP 文件search.php 和客户端脚本loadtable.js，它们正在处理 JSON 数据并执行分页任务。
//###########################################
// Pagination code start
//###########################################
$("#pagination").attr('style','display:block;');
$("#pagination").html("<p1>Total number of records fetched: "+result.length+"</p1><h5 style='display: inline-block;float:left;width: 150px;'>Number of rows/page: <select id='number-of-records-per-page' onchange='num_of_records(this)' style='width:60px;'><option value='10'>10</option><option value='20'>20</option><option value='30'>30</option><option value='40'>40</option><option value='50'>50</option></select></h5><br><br>");
$("#pagination").append("<div id='nav-pagination' style='float:left;'><a href='#'>«</a><a class='active' href='#'>1</a></div>");
var total_num_of_rows = result.length;
var number_of_rows_per_page = $('#pagination').find('#number-of-records-per-page option:selected').val();
console.log(total_num_of_rows)
console.log(number_of_rows_per_page)
for (i = 1; i < total_num_of_rows/number_of_rows_per_page; i++) {
$("#nav-pagination").append("<a href='#'>"+(i+1)+"</a>");
}
$("#nav-pagination").append("<a href='#'>»</a></div>");
//###########################################
// Pagination code end
//###########################################
问题是我在 ajax 成功函数success:function(data){ 中进行分页，我认为当从服务器端接收到 JSON 结果时会调用一次。也因为我是 ajax 的初学者，感觉很难继续。请帮忙。
客户端脚本loadtable.js的完整代码
// This is script to load table based on filter section
$(document).ready(function() {
var delay = 1000;
// Campaign Submit Info
$('[name="search_submit"]').click(function(e) {
$('#load-csv-file-button').attr('style','display:none;');
$("#filterRecords").attr('style','display:block;');
$('#add_lead_info').attr('style','display:none;');
e.preventDefault();
var lead_owner = $('#filterformpost').find('#lead_owner_select option:selected').val();
var lead_status = $('#filterformpost').find('#lead_status_select option:selected').val();
var campaign_status = $('#filterformpost').find('#campaign_status_select option:selected').val();
var company_name = $('#filterformpost').find('#company_name_select option:selected').val();
var tech_area = $('#filterformpost').find('#tech_area_select option:selected').val();
var firm_size = $('#filterformpost').find('#firm_size_select option:selected').val();
var firm_type = $('#filterformpost').find('#firm_type_select option:selected').val();
var country_name = $('#filterformpost').find('#country_name_select option:selected').val();
var state_name = $('#filterformpost').find('#state_name_select option:selected').val();
var start_date = $('#filterformpost').find('#start_date_search').val();
var end_date = $('#filterformpost').find('#end_date_search').val();
$.ajax({
type: "POST",
url: "./server/search.php",
data: {
"lead_owner": lead_owner,
"lead_status": lead_status,
"campaign_status": campaign_status,
"company_name": company_name,
"tech_area": tech_area,
"firm_size": firm_size,
"firm_type": firm_type,
"country_name": country_name,
"state_name": state_name,
"start_date": start_date,
"end_date": end_date
},
beforeSend: function() {
$('.search_lead_filter_message_box').html(
'<img src="tenor.gif" width="40" height="40"/>'
);
},
success:function(data){
var result = $.parseJSON(data);
$("#filterRecords").empty();
//###########################################
// Pagination code start
//###########################################
$("#pagination").attr('style','display:block;');
$("#pagination").html("<p1>Total number of records fetched: "+result.length+"</p1><h5 style='display: inline-block;float:left;width: 150px;'>Number of rows/page: <select id='number-of-records-per-page' onchange='num_of_records(this)' style='width:60px;'><option value='10'>10</option><option value='20'>20</option><option value='30'>30</option><option value='40'>40</option><option value='50'>50</option></select></h5><br><br>");
$("#pagination").append("<div id='nav-pagination' style='float:left;'><a href='#'>«</a><a class='active' href='#'>1</a></div>");
var total_num_of_rows = result.length;
var number_of_rows_per_page = $('#pagination').find('#number-of-records-per-page option:selected').val();
console.log(total_num_of_rows)
console.log(number_of_rows_per_page)
for (i = 1; i < total_num_of_rows/number_of_rows_per_page; i++) {
$("#nav-pagination").append("<a href='#'>"+(i+1)+"</a>");
}
$("#nav-pagination").append("<a href='#'>»</a></div>");
//###########################################
// Pagination code end
//###########################################
var table='';
table = $("<table></table>");
table.append('<thead><th>#</th><th>Lead Name</th><th>Company</th><th>Email</th><th>Phone</th><th>Lead Owner</th></thead>');
table.append('<tbody></tbody>');
var i = 1;
$.each(result, function(key, value) {
table.last().append("<tr><td>" + i + "</td><td><a target='_blank' href=./lead/index.html?lead_id="+ value['Lead_Id'] + " </a>" + value['FirstName'] + ' ' + value['LastName'] + "</td><td>" + value['Company'] + "</td><td><a href=mailto:" + value['Email'] + ">" + value['Email'] + "</a></td><td>" + value['Phone'] + "</td><td><a target='_blank' href=./account/index.html?user_id="+ value['LeadAddedBy'] + " </a>" + value['LeadAddedBy'] + "</td></tr>" );
i = i + 1;
});
table.after().append("<br><br>");
$("#filterRecords").html(table);
$('.search_lead_filter_message_box').html('');
}
});
});
});
【问题讨论】：
-
这有用吗stackoverflow.com/questions/42152944/…，但在这个引导程序中使用
-
你为什么不使用引导数据表的内置功能？你可以在哪里执行服务器端分页等，你想要的一切
-
因为自从我开始我的项目以来我没有使用过引导程序，这就是为什么我不想在两者之间使用
-
我在答案部分粘贴了我的一些问题，如果你能解决它们会很棒
-
@AkhtarMunir 你有什么建议
标签： javascript jquery html ajax