如何在不使用 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>
<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>
我想用分页做两件事。
对行数进行分区示例：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]）。
繁花不似锦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
相关分类
JavaScript
