如何在不使用 Bootstrap 的情况下在客户端对 JSON 数据进行分页？答案

【问题标题】：How to paginate the JSON data at client side without using Bootstrap?如何在不使用 Bootstrap 的情况下在客户端对 JSON 数据进行分页？
【发布时间】：2020-06-23 02:59:57
【问题描述】：

解决方案在这个 JSFiddle 中： https://jsfiddle.net/rinku16/mpo7xyjk/17/

当用户点击过滤搜索并根据搜索条件在客户端下载JSON时，我的分页JS函数根据每页的行数划分行，并相应地在上一个和下一个按钮之间制作数字导航按钮。

我遇到了页面导航按钮与上一个/下一个按钮同步的问题。

我的问题如下

例如：最初在搜索时单击它仅显示表头，但如果用户按下下一个按钮，它会显示 (10-19) 10 条记录在前 0-9 行之后继续（跳过）但如果用户单击 0 导航按钮（在上一个和下一个按钮）但它显示（0-1-2）3行（但它应该显示0-9行）并且当点击1个按钮时它应该显示（10-19）但它显示（3-4-5 )。

我已更新此 JSFiddle 链接 (https://jsfiddle.net/rinku16/hn3t9gz6/33/) 中的代码，但无法正常工作。

我正在尝试构建一个逻辑。您可以在链接上检查所有逻辑。我无法执行以下任务。

HTML：

<html>

  <head>


      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>

      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>


  </head>

  <body>

    <div class="row">
      <div class="col">
        <div>
          Pagination Div
          <div id="pagination"></div>
        </div>
      </div>
    </div>
    <div class="row" style="overflow-x:auto;">
      <div class="col">
        <div>
       Records Div
          <div id="filterRecords"></div>
        </div>
      </div>
    </div>

    </body>
    </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);

});
}

我想用分页做两件事。

对行数进行分区示例：JSON 有 32 行，然后每页查看 10 行，然后我的按钮为 1（10 行）、[2]（10 行）、[3]（10 行） ), [4] (2 rows) {我已在链接中为此编写代码}
将焦点从一个按钮移动到下一个按钮（单击下一个按钮）1 -> [2] -> [3] -> [4]）{我还没有为此编写代码需要使用按钮 id 更改 CSS(1->[2]->[3]->[4])}

问题是按钮单击上一个和下一个与焦点按钮不同步（1->[2]->[3]->[4]）。

到目前为止我的工作截图。

请更正我的代码。

【问题讨论】：

你真的加载 jquery 4 次吗？
我听不懂你说什么
当用户点击搜索并在客户端下载 JSON 时，我的分页功能根据每页的行数对行进行分区，并相应地在上一个和下一个按钮之间制作数字导航按钮
在头部加载 4 个脚本，在我看来，它们是相同的，但来源不同。我想假设你看看 Bootstrap Table bootstrap-table.com
我认为这不会引起问题

标签： javascript jquery ajax

【解决方案1】：

如果理解正确，如果您单击按钮 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()

仅将其放在代码的末尾

see fiddle

【讨论】：

我怀疑我在我的 AJAX 成功函数中获取了这个 JSON 对象然后我使用了这个分页函数，我可以在成功的 AJAX 函数中使用$(document).ready(function() {}，它还具有 JS 分页函数的功能
"$(document).ready(function() {} inside the success AJAX function" 对我来说毫无意义。将您的ajax调用放入document.ready，然后它将在dom之后执行准备好，然后您可以在成功或完成的情况下处理进一步的任务。如果您对答案感到满意，请标记为“已回答”。欢迎您
我很困惑，因为当我单击搜索按钮时，首先只显示表头，然后单击数字导航或下一步按钮，然后显示行
我正在将我的代码粘贴到 JSfiddle 中，请参见 JS 代码 jsfiddle.net/rinku16/L8qo7km6，忽略 HTML 代码
@rinkuyadav 我不得不更新我的小提琴。现在你可以看到它工作了

【解决方案2】：

看看那个叉子 (https://jsfiddle.net/Kyrylo/2hbxmove/)

我使用按钮的禁用/启用来代替焦点，但想法相同。

// 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] 导航按钮时，再次只显示 3 行