滚动到 DataTable 中的特定行

Question

我有一个 DataTable，我想滚动到给定行的类的特定行。表中的每一行都被分配了一个唯一的类，我想用它来选择包含的行。小提琴中的每个按钮都有一个具有唯一类的选择器。

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 被按下时表格的相应行进入视图（对于所有按钮）。

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

拨弄https://jsfiddle.net/myojo7pw/

Answer 1

您可以使用scrollTo jQuery plugin，它允许您使用类、id、类型或组合滚动到任何元素。由于表格的可滚动部分具有 dataTables_scrollBody 类，因此您可以在单击事件中像这样为这样的按钮激活 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