Question

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

我在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请求，以获取更多数据，然后将其填充到{{ 1}}用户单击。此代码还负责关闭/折叠所有打开的行：

<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'); } } );函数，该函数处理上述的ajax请求。一切正常。

我想做的是找到一种以编程方式打开某些行的方法。我的意思是说，用户点击了一个具有行ID的数组，例如

expand_substance

此数组数据将存储在Redis（缓存）中，因此，如果用户离开页面导航，返回时，var openRows = [5, 6, 8, 33, 100];中的数据将被加载，并且我想打开适当的行。但是我不知道如何告诉DataTables打开第5、6、8、33、100等行。

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

openRows

我收到控制台错误：

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

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

那么，是否可以使用JavaScript根据已知ID（VM308:1 Uncaught TypeError: substancesTable.row is not a function）的数组打开表的某些行？

Answer 1

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

首先，我不得不提到使用服务器端功能构建演示是不可能的（或者至少很痛苦），因此我使用了DataTable的"zero configuration" example。

现在，我希望我能正确理解一个行索引数组是以前要通过用户行点击存储的...并且这是当前问题的起点，可以重用该数组来操作行。

在我的示例中，只有57行...因此，我使用了以下数组：var targets = [5, 6, 8, 33]。

逐步解决方案：

使用drawCallback在阵列上运行一个for循环。
以正确的顺序获取绘制的行...表示之后排序。
我们需要使用row-selector和有用的{ order: 'applied' }技巧。
（在dataTables forum question 中找到）
从中获取nodes。
使用jQuery .eq()方法，根据数组定位正确的行。
因此，我们必须首先创建一个带有行集合的jQuery对象（用$()包装）。
操纵行！
在我的示例中，我刚刚向子级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

记住：行从零开始...
注意，上面操作的行索引是后排序的（因此它反映了当前显示给用户的顺序，而不是标记或Ajax提供给Datatables的顺序。）这意味着，排序应与用户单击行（从而保存索引）时的排序相同。那可能是个问题...;）

Answer 2

对此的答案是由一位同事提供的，并利用了DataTables提供的rowCallback（https://datatables.net/reference/option/rowCallback）回调。

var substancesTable = $('#substancesTable').DataTable({

// ...

"rowCallback": function(row) {
       var id = $(row).find('td:first').text();
       var index = $.inArray(id, openRows);

       if (index !== -1) {
           var tr = $(row).closest('tr');
           var row = substancesTable.row( tr );
           row.child( expand_substance(row.data()) ).show();
           tr.addClass('active');
       }
    }
});

此回调将对每行进行处理（用row表示）。 var index = $.inArray(id, openRows);行是var id数组中的当前行（由openRows中的文本标识）。由于表中的第一列包含ID，因此我们可以在var id和openRows之间进行匹配。

如果找到ID，它将触发我编写的名为expand_substance()的函数。这与DataTables无关，它是一个自定义js函数。

在我的情况下，expand_substance()函数负责进行ajax调用以获得更多详细信息，然后将其填充到该行中：

function expand_substance ( rowData ) {
    var div = $('<div/>')
        .text('Loading...');

    $.ajax( {
        url: '/view-substance/expand-substance/' + rowData.id,

        dataType: 'html',
        success: function ( data ) {
            div.html(data);
        }
    });

    return div;
}

这仅是必需的，因为当用户在我的应用程序中扩展一行时，显示的详细信息是通过ajax请求获得的。从理论上讲，如果数据在页面加载时就不使用expand_substance()。

这在我的应用程序中有效。提供给该帖子的其他答案沿右行显示，但不使用ajax源数据，并且不展开一行，而只是将其突出显示为红色。因此，我提供了自己的答案，因为它可以完全解决问题，其他人可能会觉得有用。

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

2 个答案: