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

Question

我认为这个问题已得到解答,但我无法解决这个问题.试过:

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

我在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

对此问题的答案是由一位同事提供的，并利用了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);当前行（由来自 的文本标识） 。由于我的表中的第一列包含 ID，因此我们可以在和之间进行匹配。var idopenRowsvar idopenRows

如果找到 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源数据，并且它不扩展行，而只是以红色突出显示它。因此，我提供了自己的答案，因为这完全解决了问题，并且其他人可能会发现它有用。