滚动到DataTable中的特定行 [英] Scroll to specific row in DataTable

问题描述

我有一个DataTable，并且鉴于该行的类别，我想滚动到特定的行.表格中的每一行都分配了一个唯一的类，我想使用该类来选择包含的行.小提琴中的每个按钮都有一个具有唯一类的选择器.

I have a DataTable and I would like to scroll to a specific row given the class of the row. Each row in the table has been assigned a unique class that I would like to use for selecting the containing row. Each one of the buttons in the fiddle have a selector with the unique 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时可以看到表的相应行(对于所有按钮).

So I would like when button1 is pressed the corresponding row of the table to come into view (for all buttons).

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

在 https://jsfiddle.net/myojo7pw/

推荐答案

您可以使用 scrollTo jQuery插件，您可以使用类，id，类型或组合滚动到任何元素.由于表的可滚动部分具有dataTables_scrollBody类，因此您可以在单击事件中为如下所示的按钮激活scrollTo:

You can use scrollTo jQuery plugin which lets you to scroll to any element using class, id, type or a combination. Since the scrollable part of the table has dataTables_scrollBody class, you can activate scrollTo like this in your click events for buttons like this:

$("#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");

} );

JsFiddle中的演示

这篇关于滚动到DataTable中的特定行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！