如何以编程方式跳转到分页数据表中的行？答案

【问题标题】：How to programatically jump to row in paginated DataTable?如何以编程方式跳转到分页数据表中的行？
【发布时间】：2017-09-26 01:36:53
【问题描述】：

我目前使用DataTables 作为我页面的一个组件。但是，我真的希望能够查询和突出显示特定的行。目前我正在使用 Scroller 附加组件中的 scrollTo() 。但是，这需要我关闭分页，并且当行高不同时也不是特别准确。

在通常的用例中，我将有十几列和几万行，因此任何解决方案都需要非常高效。我对 DataTables 并不完全满意，所以我打开了其他表实现。我确实需要

按列排序
同时过滤搜索
分页
以编程方式定位并跳转到突出显示的行

虽然是 DataTable 的一部分，但也不会像 Handsontable 中那样使用多余的功能使表格膨胀。对于您认为可能符合我要求的表库的任何建议，我将不胜感激，我只是目前没有时间玩弄大约 50 个库。

编辑：添加了我正在使用的链接。

【问题讨论】：

Off topic due to : "要求我们推荐或查找书籍、工具、软件库、教程或其他非现场资源的问题对于 Stack Overflow 来说是不重要的，因为它们倾向于吸引自以为是的答案和垃圾邮件。相反，请描述问题以及迄今为止为解决该问题所做的工作。"
修改 datatables.net/plug-ins/api/page.jumpToData() 以跳转到行索引并突出显示该行应该非常容易，如果跳转到特定数据还不够的话。
谢谢，这可能正是我需要的。

标签： javascript jquery datatable pagination

【解决方案1】：

您将需要来自 jumpToData 页面的 JS 插件，以及此代码。这是修改后的JSFiddle，其中包含按钮。使用这些按钮：

HTML

<button data-name="Donna Snider">Donna Snider</button>
<button data-name="Paul Byrd">Paul Byrd</button>
<button data-name="Sonya Frost">Sonya Frost</button>

$(function() {
    var table = $('#example').DataTable({
        responsive: true
    });

    $('button').on('click', function() {
        let name = $(this).attr('data-name');
        table.page.jumpToData(name, 0);
    });
});

【讨论】：

谢谢，目前 DataTables 的性能不是问题，尽管使用 scrollTo 的滚动准确性有点差。实际上，我对分页解决方案更感兴趣，因为我认为它更干净，但是在 DataTables 中打开分页会消除我跳转到所需行的能力。
当您提到 DataTables 时，这是您使用的吗？ datatables.net 如果你有一个模拟出来的 JS Fiddle，也许我可以看到代码有什么问题，并指出一些关于如何使跳转到行功能起作用的提示。
是的，它非常适合我的使用，但我觉得有点受制于可用插件的附加功能。并不是我的跳转行不起作用，而是我只能通过datatables.net/extensions/scroller 插件来实现，该插件仅在我的表格配置为滚动而不是分页时才有效。
jQuery 的美妙之处在于它是原生 JS 的便捷包装器。只要对其中任何一个有一点了解，您就可以破解它并增强它。完善它并使其按照您希望的方式工作非常容易。 :) 你有入门代码示例吗？它不一定是您的实际代码。它可能只是一个模型。或者您开始使用的 API 配置，因此可以通过以下方式重新创建它：JSFiddle.net
这里是它的 JSFiddle：jsfiddle.net/briankueck/rf6q9g45 这正是我正在使用的。只需确保添加该 .js 文件并查看我的按钮中的代码即可。