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

解决方案在这个 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>

</head>

<body>

<div>

Pagination Div

</div>

<div>

Records Div

</div>

</body>

</html>

我想用分页做两件事。

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

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

繁花不似锦

浏览 118回答 2

2回答

慕尼黑5688855

如果理解正确，如果您单击按钮 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()仅将其放在代码的末尾

大话西游666

看看那个叉子（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');

随时随地看视频慕课网APP