如何在数据表上获取具有类的行的索引

Question

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

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

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

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

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

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

Answer 1

以下说明假定您使用的是最新版本的 DataTables。我的示例使用版本 1.10.22。

修复错误

要解决“table.row is not a function”问题，您可以更改以下行：

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

到这里（注意大写的D）：

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

您需要这样做的原因是您创建对DataTables 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>

结果：