如何获取数据表上某个类的行索引

我想获取具有“selected”类的行的索引。我怎样才能做到这一点？这失败了。

var datatable = '#mytableid';
var selectedclass='selected'; 
var table = $(datatable).dataTable();
var oSettings = table.fnSettings();

var selectedNode = table.row("."+selectedclass).node();

为此，我收到：“table.row 不是函数”

附加说明：表格使用分页，并且具有“selected”类的行可以位于每个可用的分页页面上。

最后我想跳转到分页页面上属于该行的这一行。

以下注释假设您使用的是最新版本的 DataTables。我的示例使用版本 1.10.22。

修复错误

要解决“table.row 不是函数”问题，您可以更改以下行：

var table = $(mydatatable).dataTable();

对此（注意大写D):

var table = $(mydatatable).DataTable();

您需要这样做的原因是因为您如何创建对数据表API目的。可以通过以下 3 种方式中的任意一种来完成：

1 - $( selector ).DataTable();
2 - $( selector ).dataTable().api();
3 - new $.fn.dataTable.Api( selector );

在您的例子中，您混合使用了方法 1 和 2。

接下来，您需要更改此设置：

var oSettings = table.fnSettings();

对此（参见settings()功能）：

var oSettings = table.settings();

现在您应该能够将表行打印到浏览器控制台，作为测试：

console.log( table.row( '.selected' ) );

跳转到所需行

有不止一种方法可以做到这一点 - 但这里有一种简单的方法：

首先，注册一个新函数，名为jumpToData():

  jQuery.fn.dataTable.Api.register( 'page.jumpToData()', function ( data, column ) {
    var pos = this.column(column, {order:'current'}).data().indexOf( data );
    if ( pos >= 0 ) {
        var page = Math.floor( pos / this.page.info().length );
        this.page( page ).draw( false );
    }
    return this;
  } );

该函数已记录here.

现在，您需要识别行中的一段数据，该数据对于该行来说是唯一的。在我的示例中，我使用标准 DataTables 示例数据 - 所以我有以下行selected我们正在使用的类：

<tr class="selected">
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
</tr>

在我的例子中，该行由第一列中的名称“Garrett Winters”唯一标识（列索引 = 0）。

因此我可以这样做：

var idColumn = 0;
var idValue = table.row( '.selected' ).data()[idColumn];    
table.page.jumpToData( idValue, idColumn );

这里重要的一点是：在我的例子中，数据作为硬编码到 HTML 表中的值数组提供，因此我使用以下方式访问数据data()[0]。如果数据以对象数组的形式提供，例如来自 JSON 对象，那么我需要在这里使用不同的语法 - 类似于data()[personName].

整个事情的经过如下：

<script type="text/javascript">

$(document).ready(function() {

  jQuery.fn.dataTable.Api.register( 'page.jumpToData()', function ( data, column ) {
    var pos = this.column(column, {order:'current'}).data().indexOf( data );
    if ( pos >= 0 ) {
        var page = Math.floor( pos / this.page.info().length );
        this.page( page ).draw( false );
    }
    return this;
  } );

  var datatable = '#mytableid';
  var selectedclass='selected'; 
  var table = $(datatable).DataTable();
  //var oSettings  = table.settings();

  var idColumn = 0;
  var idValue = table.row( '.selected' ).data()[idColumn];    
  table.page.jumpToData( idValue, idColumn );

} );

</script>

结果：