Jquery DataTables滚动到包含ajax分页数据的行

在DataTables中，通过在ajax响应数据中指定

DT_RowId

，我可以自动向表中的每一行添加一个ID。这意味着每行获得一个

id

属性，例如

<tr id="row_45">
    <td>foo</td>
    <td>bar</td>
</tr>

福
酒吧

这在我的应用程序中很有用，因为这意味着我可以使用URL，例如：

/#row_45

，并在页面顶部显示第45行

如果行位于第1页上，则此操作非常有效

我的应用程序显示每页250行，每页都是通过ajax请求生成的。有时超过1000页。因此，如果我尝试以相同的方式打开第999行（

/#row_999

），它将不起作用，因为它的数据不在文档中

我在“服务器端”模式下使用分页和数据表。这意味着所有的数据都没有出现在页面加载上，这使得这个问题更加困难。如果我在分页中单击“第3页”，它会发出一个记录750-1000（每页250条）的ajax请求

有人知道有没有解决办法吗

---

DataTables 1.10.16版本机Javascript具有scrollIntoView：

var el = getElementById('row_4');
el.scrollIntoView(true);

---

假设

id

中的数字是0形式的连续运行数字，安全吗

然后，我们可以根据

id

确定页码，并使dataTables加载正确的页面：

var rowIdx = '#row_45'.split('_')[1];
var table = $('#substancesTable').DataTable();

// Page number
var pageNo = Math.floor(rowIdx/table.page.info().length);

// Load page
table.page(pageNo).draw('page');

// Add scroll function if needed

编辑：如果需要服务器请求来确定行所在的页面，则首先执行该请求：

// Make an ajax-call to get the rowIdx
var rowIdx = someAjaxFunctionToRequestThePageNo( '#row_45'.split('_')[1] );

var table = $('#substancesTable').DataTable();

// Page number
var pageNo = Math.floor(rowIdx/table.page.info().length);

// Load page
table.page(pageNo).draw('page');

// Add scroll function if needed

---

这就是StackOverflow如何使用URI引用唯一实体，并使用DOM标识符在浏览器呈现的网页中导航

https://stackoverflow.com/questions/55000320/datatable-with-filter-data-dynamically/55000876#comment96759679_55000876

您必须在应用程序中应用类似的原则。 我认为DataTables文档，特别是示例部分，涵盖了服务器端处理模式的许多用例

您必须将其设计到应用程序中。没有简单的解决办法

文件

特色内容

---

解决这一问题的关键是：正如问题中所述，我们在

服务器端

模式下使用数据表。它具有分页功能，当您单击每个页面时，它会发出一个单独的ajax请求，仅加载该页面的数据。例如，如果您单击第2、3、4页，它将发出3个单独的ajax请求—每页一个。问题就在这里——如果你想滚动到第999行，你必须回答“第999行出现在哪一页”的问题
实现这一点的唯一方法是调用服务器端脚本，该脚本将计算页码并将其返回给应用程序使用的js。需要这样做的原因是，例如，如果您在第1页，而第999行恰好在第4页，则DOM中的任何位置都没有第4页的行；事实上，在你点击页面第4页之前，你根本不会有这些
因此，要做的第一件事是向端点发出ajax请求，该端点计算该页码并返回一个整数页码的计算方式取决于应用程序@Sascha Gottfried在他们的回答中暗示了这一点。在我们的应用程序中，行不是顺序的，即您可以在

行999

后面加

行1052

：
• 如果它们是连续的，您可以执行与ceil（999/250）相当的操作，这将告诉您第4页出现第999行，而每页有250条记录

• 如果它们不是连续的（在我的应用程序中就是这样），端点必须提供一种计算方法。你是如何做到这一点的，没有固定的答案。在我们的应用程序中，它依赖于多个搜索/筛选参数，这可能导致行的顺序不一致。然而，脚本需要做的只是返回一个整数，例如，

  echo json_encode（['page'=>4]）
  

一旦计算出这个数字，您就必须在DataTables中触发对“第4页”（或您想要的任何页码）的等效单击。这可以通过在jquery中定位

.dataTables\u paginate

中的锚来实现
然后，您必须向下滚动到该行，@ygorbunkov提供了一些与此相关的信息。缺少或不明显的是，在尝试滚动到行之前，您必须等待填充DataTable的ajax请求完成，否则数据不存在，无法滚动到。这可以通过将ajax请求中的

.done（）

嵌套到获取第4页数据的端点来实现

---

虽然这是一个不完整的答案，但这些都是必需的原则。最后，我们实际上放弃了在应用程序中这样做，因为尝试实现它的复杂性超过了任何好处
因为

行999

不在页面范围内，这就是问题所在。在页面中呈现ajax请求的数据后，您可以使用scrollIntoView，您分配给客户端的行id（在您的示例中为

行45

）与后端数据如何对应？是否有明确的id字段/属性？如果所需行被过滤掉，您应该滚动到哪里？我和ygorbunkov有相同的问题。如果行号对应于数据库表的主键，那么客户端将如何知道在删除某些行的情况下转到哪个页面，或者取决于当前的datatable排序和筛选器。或者您是在为通过ajax返回的所有行按顺序分配行号吗？您可以发布您尝试这样做的代码吗？很好的用例，但我发现很难提供指导，因为您没有提供任何代码或JSFIDLE，这些代码或JSFIDLE可能已经形成了一个定义良好的解决方案空间，人们可以在其中添加缺少的bi