Javascript 如何在不使用引导的情况下在客户端对JSON数据进行分页？

解决方案在此JSFIDLE中：

当用户点击过滤搜索，客户端根据搜索条件下载JSON时，my pagination JS函数会根据每页的行数对行进行分区，并相应地在上一个和下一个按钮之间创建数字导航按钮

我无法同步页面的导航按钮和“上一页/下一页”按钮

我的问题如下

例如：最初在搜索时单击它只显示表格标题，但如果用户按“下一步”按钮，它将显示（10-19）10条记录，在上一行的0-9之后继续（跳过），但如果用户单击0导航按钮（在“上一步”和“下一步”按钮之间），它将显示（0-1-2）3行（但它应显示0-9行）当点击1按钮时，它应该显示（10-19），但它显示（3-4-5）

我已经更新了这个JSFiddle链接（）中的代码，但它不能正常工作

我试图建立一个逻辑。您可以检查链接上的所有逻辑。我无法完成以下任务

HTML:

分页分区
档案组

客户端逻辑：

// This is script to load table based on filter section

$(document).ready(function() {

userDetails = [{
"Lead_Id": "66",
"FirstName": "John",
"LastName": "Doe",
"Company": "Google",
"Website": "www.google.com",
"Designation": "Manager",
"Linkedin": "www.linkedin.com\/john-doe",
"Email": "johndoe@google.com",
"Phone": "5125501553",
"State": "Delaware",
"Country": "USA",
"TechArea": "Cloud computing",
"FirmType": "Corporate",
"FirmSize": "Less than 10",
"LastContactDate": "2020-02-03",
"NextContactDate": "2020-02-29",
"LeadDescription": "This is lead description testing",
"OwnerNotes": null,
"SetReminder": "2020-02-29",
"AdminNotes": "This is admin notes testing",
"LeadStatus": "Planned",
"LeadAddedBy": "18",
"LeadAddedOn": "2020-02-03 16:28:26",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
}, {
"Lead_Id": "67",
"FirstName": "Tohn",
"LastName": "Doe",
"Company": "Microsoft",
"Website": "www.microsoft.com",
"Designation": "Manager",
"Linkedin": "www.linkedin.com\/tohn-doe",
"Email": "tohn@microsoft.com",
"Phone": "123456",
"State": "California",
"Country": "USA",
"TechArea": "Computer Networks",
"FirmType": "Corporate",
"FirmSize": "Less than 10",
"LastContactDate": "2020-03-05",
"NextContactDate": "2020-03-07",
"LeadDescription": "This is test lead description",
"OwnerNotes": null,
"SetReminder": "2020-03-11",
"AdminNotes": "This is testing admin notes",
"LeadStatus": "Planned",
"LeadAddedBy": "18",
"LeadAddedOn": "2020-03-05 10:47:21",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
}];

//More JSON object you can get on jsfiddle link

$("#filterRecords").empty();

var result = $.parseJSON(userDetails);

//###########################################
// Pagination code start
//###########################################

$("#pagination").attr('style', 'display:block;');

$('#pagination').html('<div class="row"><div class="col"><button class="col PreviousButton" id="PreValue"><i class="ion-skip-backward"></i> Previous</button></div>  <div id="nav-numbers" class="col nav"></div>  <div class="col"><button class="col NextButton" id="nextValue">Next <i class="ion-skip-forward"></i></button></div></div>');

paginate_json_data(result)

$("#filterRecords").html(table);


//###########################################
// Pagination code end
//###########################################

});

function paginate_json_data(userDetails) {

var table = '';

table = $("<table></table>");

table.append('<thead><th>#</th><th>Name</th><th>Company</th><th>Website</th><th>Designation</th><th>Linkedin</th><th>Email</th><th>Phone</th><th>State</th><th>Country</th><th>TechArea</th><th>Firm Type</th><th>Firm Size</th><th>Last Contact Date</th><th>Next Contact Date</th><th>Lead Description</th><th>Owner Notes</th><th>Reminder Date</th><th>Admin Notes</th><th>Lead Status</th><th>Lead Added By</th><th>Lead Added On</th><th>Lead Updated By</th><th>Lead Updated On</th></thead><br>');

table.append('<tbody id="myTable"></tbody>');

userDetails = userDetails

$('#pagination').append('<p1>Total number of rows fetched: ' + userDetails.length + '</p1>');

var max_size = userDetails.length;
var sta = 0;

var elements_per_page = 10;

// var elements_per_page = rows_per_page;

var limit = elements_per_page;

goFun(sta, limit);

function goFun(sta, limit) {

// console.log(sta,limit);            

for (var i = sta; i < limit; i++) {


  var tab = '<tr><td>' + i + "\n" + '</td><td>' + "<a target='_blank' href=./lead/index.html?lead_id=" + userDetails[i].Lead_Id + " </a>" + userDetails[i].FirstName + ' ' + userDetails[i].LastName + "\n" + '</td><td>' + userDetails[i].Company + "\n" + '</td><td>' + userDetails[i].Website + "\n" + '</td><td>' + userDetails[i].Designation + "\n" + '</td><td>' + userDetails[i].Linkedin + "\n" + '</td><td>' + "<a href=mailto:" + userDetails[i].Email + ">" + userDetails[i].Email + "</a>" + "\n" + '</td><td>' + userDetails[i].Phone + "\n" + '</td><td>' + userDetails[i].State + "\n" + '</td><td>' + userDetails[i].Country + "\n" + '</td><td>' + userDetails[i].TechArea + "\n" + '</td><td>' + userDetails[i].FirmType + "\n" + '</td><td>' + userDetails[i].FirmSize + "\n" + '</td><td>' + userDetails[i].LastContactDate + "\n" + '</td><td>' + userDetails[i].NextContactDate + "\n" + '</td><td>' + userDetails[i].LeadDescription + "\n" + '</td><td>' + userDetails[i].OwnerNotes + "\n" + '</td><td>' + userDetails[i].SetReminder + "\n" + '</td><td>' + userDetails[i].AdminNotes + "\n" + '</td><td>' + userDetails[i].LeadStatus + "\n" + '</td><td>' + "<a target='_blank' href=./account/index.html?user_id=" + userDetails[i].LeadAddedBy + " </a>" + userDetails[i].LeadAddedBy + "\n" + '</td><td>' + userDetails[i].LeadAddedOn + "\n" + '</td><td>' + userDetails[i].LeadUpdatedBy + "\n" + '</td><td>' + userDetails[i].LeadUpdatedOn + "\n" + '</td></tr>';

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

}
}

$('#nextValue').click(function() {

var next = limit;
if (max_size >= next) {
  def = limit + elements_per_page;
  limit = def

  $('#myTable').empty();

  if (limit > max_size) {
    def = max_size;
  }
  goFun(next, def);
}
});

$('#PreValue').click(function() {

var pre = limit - (2 * elements_per_page);
if (pre >= 0) {

  limit = limit - elements_per_page;

  $('#myTable').empty();

  goFun(pre, limit);

}
});

var number = Math.round(userDetails.length / elements_per_page);

for (i = 0; i <= number; i++) {

$('.nav').append('<button class="nav-numbers btn" id=' + i + '>' + i + '</button>');

}

$('.nav button').click(function() {
var start = $(this).text();
$('#myTable').empty();

limit = 3 * (parseInt(start) + 1) > max_size ? max_size : 3 * (parseInt(start) + 1)

goFun(start * 3, limit);

});
}

//这是基于筛选器节加载表的脚本
$（文档）.ready（函数（）{
用户详细信息=[{
“领导Id”：“66”，
“名字”：“约翰”，
“姓氏”：“能源部”，
“公司”：“谷歌”，
“网站”：“www.google.com”，
“指定”：“经理”，
“Linkedin”：“www.Linkedin.com\/john doe”，
“电子邮件”：johndoe@google.com",
“电话”：“5125501553”，
“州”：“特拉华州”，
“国家”：“美国”，
“TechArea”：“云计算”，
“FirmType”：“Corporate”，
“FirmSize”：“小于10”，
“最后联系日期”：“2020-02-03”，
“下一个合同日期”：“2020-02-29”，
“潜在客户描述”：“这是潜在客户描述测试”，
“OwnerNotes”：空，
“设置提醒”：“2020-02-29”，
“管理员笔记”：“这是管理员笔记测试”，
“LeadStatus”：“已计划”，
“LeadAddedBy”：“18”，
“LeadAddedOn”：“2020-02-03 16:28:26”，
“LeadUpdatedBy”：空，
“LeadUpdateOn”：空
}, {
“领导Id”：“67”，
“名字”：“Tohn”，
“姓氏”：“能源部”，
“公司”：“微软”，
“网站”：“www.microsoft.com”，
“指定”：“经理”，
“Linkedin”：“www.Linkedin.com\/tohn doe”，
“电子邮件”：tohn@microsoft.com",
“电话”：“123456”，
“州”：“加利福尼亚州”，
“国家”：“美国”，
“TechArea”：“计算机网络”，
“FirmType”：“Corporate”，
“FirmSize”：“小于10”，
“最后联系日期”：“2020-03-05”，
“下一个合同日期”：“2020-03-07”，
“潜在客户描述”：“这是测试潜在客户描述”，
“OwnerNotes”：空，
“设置提醒”：“2020-03-11”，
“管理员笔记”：“这是测试管理员笔记”，
“LeadStatus”：“已计划”，
“LeadAddedBy”：“18”，
“LeadAddedOn”：“2020-03-05 10:47:21”，
“LeadUpdatedBy”：空，
“LeadUpdateOn”：空
}];
//在JSFIDLE链接上可以获得更多JSON对象
$（“#filterRecords”）.empty（）；
var result=$.parseJSON（userDetails）；
//###########################################
//分页代码开始
//###########################################
$（“#分页”）.attr（'style'，'display:block；'）；
$（'#分页'）.html（'Previous-Next'）；
分页数据（结果）
$（“#filterRecords”）.html（表格）；
//###########################################
//分页代码结束
//###########################################
});
函数paginate_json_数据（userDetails）{
var表=“”；
表=$（“”）；
表.追加（“#名称公司网站名称登录EmailPhoneStateCountryTechArea公司类型公司大小截止联系人日期下一个联系人日期潜在客户描述所有者说明潜在客户日期管理员说明潜在客户状态潜在客户添加由潜在客户添加由潜在客户更新由潜在客户更新于
”）；
表.附加（“”）；
userDetails=userDetails
$（'#分页'）.append（'获取的行总数：'+userDetails.length+''）；
var max_size=userDetails.length；
var-sta=0；
每页的风险值元素=10；
//var elements_per_page=行数_per_page；
var limit=每页的元素数；
goFun（sta，限制）；
功能goFun（sta，限制）{
//控制台日志（sta，限制）；
对于（var i=sta；i
将焦点从一个按钮移动到下一个按钮（单击下一个按钮）->[2]->[3]->[4]）{我没有为此编写代码，因为它需要使用按钮id（->[2]->[3]->[4]）进行CSS更改

问题是按钮单击“上一步”和“下一步”与聚焦按钮不同步（->[2]->[3]->[4]）

我到现在为止的工作截图


请更正我的代码。
看看那个叉子（）

相反，我使用按钮的禁用/启用，但想法相同

// keep in scope var current - ref to current page
// on nav btn click, prev, next
// remove disabled attr from current btn
$('#' + current).removeAttr('disabled');

// update current value, line below from onPrevClick handler    
current = Math.max(current - 1 , 0);

// disable new current 
$('#' + current).attr('disabled', 'disabled');

如果理解正确，如果单击按钮1、2或3，则仅显示下一个3个新的，但应显示下一个10个新的。
然后更改以下内容：
将代码中的“3”改为“10”

$('.nav button').click(function() {

var start = $(this).text();

$('#myTable').empty();

limit = 10 * (parseInt(start) + 1) > max_size ? max_size : 10 * (parseInt(start) + 1)

goFun(start * 10, limit);

}))

编辑：

要直接从结果开始，可以执行第一个按钮，如

$('.nav button')[0].click()

只把它放在代码的末尾

$('.nav button').click(function() {

var start = $(this).text();

$('#myTable').empty();

limit = 10 * (parseInt(start) + 1) > max_size ? max_size : 10 * (parseInt(start) + 1)

goFun(start * 10, limit);

你真的加载了4次jquery吗？当用户点击搜索并在客户端下载JSON时，我不明白你说的话，我的分页功能根据每页的行数对行进行分区，并相应地在加载的头4中的上一个和下一个按钮之间设置数字导航按钮