解决方案在这个 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
TA贡献1848条经验 获得超2个赞
如果理解正确，如果您单击按钮 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
TA贡献1817条经验 获得超14个赞
看看那个叉子（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');
添加回答
举报
0/150
提交
取消