javascript - 如何以编程方式在 DataTables 中打开多行

Question

我以为这个问题会得到解答，但我无法解决这个问题。尝试过:

• https://datatables.net/forums/discussion/25833/is-there-any-way-to-programmatically-select-rows
• https://datatables.net/reference/api/row().select()

我在 serverSide 中使用 DataTables 1.10.16|模式 - 我的数据是通过 ajax 加载的，而不是在页面加载时加载的。

我的标记只是一个带有 ID #substancesTable 的表格:

<table id="substancesTable" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>EC</th>
            <th>CAS</th>
            <th>Name</th>
         </tr>
     </thead>
</table>

加载数据的js如下:

var substancesTable = $('#substancesTable').DataTable({
    "processing": true,
    "serverSide": true,
    "searching": false,
    "ajax": {
        "url": "/get-substances.json",
        "dataSrc": function (json) {
             return json.data;
        }
    }
});

这很好地填充了我的表格。我有一个事件处理程序，当用户手动单击一行(<td> 内的任何 #substancesTable 元素)时，它会发出进一步的 ajax 请求以获取更多数据，然后将这些数据填充到 <td> 内用户点击。此代码还负责关闭/折叠任何打开的行:

$('#substancesTable tbody').on('click', 'td', function () {
    var tr = $(this).closest('tr');
    var row = substancesTable.row( tr );

    if ( row.child.isShown() ) {
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        row.child( expand_substance(row.data()) ).show();
        tr.addClass('shown');
    }
} );

上面的代码调用了一个函数expand_substance它处理提到的ajax请求。这一切都很好。

我正在尝试做的是找到一种以编程方式打开某些行的方法。我的意思是拥有一组用户点击过的行 ID，例如

var openRows = [5, 6, 8, 33, 100];

此数组数据将存储在 Redis(缓存)中，因此如果用户离开页面，当他们返回时，数据在 openRows 中将被加载，我想打开适当的行。但我不知道如何告诉 DataTables 打开第 5、6、8、33、100 等行。

上面的链接似乎对我不起作用。例如，如果我尝试:

substancesTable.row(':eq(0)', { page: 'current' }).select();

我收到一个控制台错误:

VM308:1 Uncaught TypeError: substancesTable.row is not a function

我不确定这是否是打开该行的方法，但找不到更多有帮助的信息。

那么，是否可以使用 JavaScript 根据已知 ID 数组 (openRows) 打开表格的某些行？

Answer 1

解决这个问题很有趣(希望我做到了)...因为它非常复杂和棘手。

首先，我必须提到使用服务器端功能构建演示是不可能的(或者至少是一种痛苦)，所以我使用了 DataTable 的 "zero configuration" example。 .

现在，我希望我能正确理解行索引数组是根据用户行点击预先存储的...并且重用该数组来操作行是当前问题的起点。

在我的示例中，只有 57 行...所以我使用了这个数组:var targets = [5, 6, 8, 33]。

逐步解决:

1. 使用drawCallback在数组上运行 for 循环。
2. 以正确的顺序获取绘制的行...这意味着之后排序。
   我们需要使用 row-selector连同有用的 { order: 'applied' } 技巧。
   (在 dataTables forum question 中找到)
3. 获取 nodes
4. 使用 jQuery 基于数组定位正确的行 .eq()方法。
   所以我们必须先用行集合创建一个 jQuery 对象(用 $() 包装)。
5. 操作行!
   在我的示例中，我只是为子 td 添加了红色背景色。
   您将从这里做您的事情。

所以这里是整个函数:

"drawCallback": function(){
  var api = this.api();

  for(i=0;i<targets.length;i++){
    $(api.rows({ order: 'applied' }).nodes()).eq(targets[i]).find("td").addClass("red");
    console.log(targets[i]);
  }
}

CodePen

---

记住行是从零开始的...
注意上面操作的行索引是 在排序之后(所以它反射(reflect)了当前显示给用户的顺序，而不是从标记或 Ajax 提供给数据表的顺序。 ) 这意味着 排序应与用户单击行时的排序相同(因此保存了索引)。那 可能是个问题……;)