滚动到 DataTable 中的特定行

Question

我有一个数据表，我想滚动到给定行的 class 的特定行。 table 中的每一行都分配了一个唯一的 class，我想用它来选择包含的行。 fiddle 中的每个按钮都有一个带有唯一 class.

的选择器

fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
  $(nRow).addClass( "c" + aData[0].replace(/\W/g, '') + aData[1].replace(/\W/g, '') + aData[2].replace(/\W/g, '') + aData[3].replace(/\W/g, '') );
},

所以我希望当按下 button1 时 table 的相应行进入视图（对于所有按钮）。

$("#button1").click( function() {
    var selection = $( "#example .cGloriaLittleSystemsAdministratorNewYork59" );
    ...
} );

Fiddle 在 https://jsfiddle.net/myojo7pw/

Answer 1

您可以使用 scrollTo jQuery plugin，它允许您使用 class、id、type 或组合滚动到任何元素。由于 table 的可滚动部分有 dataTables_scrollBody class，您可以在按钮的点击事件中像这样激活 scrollTo：

$("#button1").click( function() {
    var selection = $( "#example .cGloriaLittleSystemsAdministratorNewYork59" );

    $(".dataTables_scrollBody").scrollTo(selection);

    // to remove .selectedRow from existing rows
    $("tr[role='row']").removeClass("selectedRow");
    // to add .selectedRow to the navigated row
    selection.addClass("selectedRow");

} );

Demo in JsFiddle

滚动到 DataTable 中的特定行

Scroll to specific row in DataTable

jquery

datatables

datatables-1.10