Question

在DataTables中，可以通过在ajax响应数据中指定<tr>来向表的每一行DT_RowId自动添加一个ID。这意味着每一行都会获得一个id属性，例如

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

这在我的应用程序中很有用，因为它意味着我可以使用诸如/#row_45之类的URL，并在页面顶部显示第45行。

如果行在第1页上，这将很好地工作。

我的应用程序每页显示250行，并且每页都是通过ajax请求生成的。有时有> 1000页。因此，如果我尝试以相同的方式打开第999行（/#row_999），该行将不起作用，因为其数据不在文档中。

我在“ serverSide”模式下使用分页和DataTables。这意味着页面加载时并非所有数据-使得此问题更加棘手。如果我在分页中单击“第3页”，则会对记录750-1000（每页250个）执行ajax请求。

有人知道是否有解决方法吗？

DataTables 1.10.16版本

Answer 1

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

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

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

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

文档

精选内容

Answer 2

可以安全地假设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

Answer 3

解决这个问题的关键-没人真正解决过-这是：如问题中所述，我们在serverSide模式下使用DataTables。它具有分页功能，当您单击每个页面时，它将发出一个单独的ajax请求，以仅加载该页面的数据。因此，例如，如果您单击第2、3、4页，它将发出3个独立的Ajax请求-每页一个。这就是问题所在-如果您想滚动到第999行，则必须回答问题“第999行出现在哪一页上？” ？

唯一的方法是调用服务器端脚本，该脚本将计算页码并将其返回给应用程序使用的js 。之所以需要这样做是因为，例如，如果您位于第1页上，而第999行恰好位于第4页上，则您在DOM中的任何地方都没有第4页的行；的确，直到您单击分页上的第4页，您都将一无所有。

因此，要做的第一件事是向计算该页码并返回整数的端点发出ajax请求。 页码的计算方式取决于应用程序。 @Sascha Gottfried在回答中对此有所暗示。在我们的应用程序中，行不是连续的，也就是说，您可以在row_999之后加上row_1052：

如果它们是 sequential ，则可以执行与ceil(999/250)等效的操作，这将告诉您第999行出现在第4页，每页有250条记录。
如果它们不是不连续（在我的应用程序中就是这种情况），则端点必须提供一种计算方法。您如何执行此操作没有确定的答案。在我们的应用程序中，它取决于多个搜索/过滤器参数，这可能导致行不按顺序排列。但是，脚本所需要做的就是返回一个整数，例如echo json_encode(['page' => 4]);

一旦计算出此数字，就必须在DataTables中触发等效的“第4页”（或所需的任何页码）点击。可以在jquery中通过定位.dataTables_paginate中的锚来完成。

然后，您必须向下滚动到该行-@ygorbunkov提供了与此相关的一些信息。遗漏或不明显的是，您必须等到ajax请求填充DataTable完成之后，才能尝试滚动到该行，否则将不存在要滚动到的数据。这可以通过在ajax请求中嵌套一个.done()到终结点来获取，该终结点获取第4页的数据。

尽管这是一个不完整的答案，但这些是必需的原则。最后，我们实际上放弃了在应用程序中执行此操作，因为尝试实现它的复杂性超过了任何好处！

Answer 4

本地Javascript具有scrollIntoView：

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

数据表滚动到带有ajax分页数据的行

4 个答案: