我如何获得与数据表上的类的行的索引 [英] How i can get the index of a row with a class on datatables

问题描述

我想获取具有"selected"类的行的索引.我怎样才能做到这一点?这失败了.

I want to get the index of a row that has the class "selected". How can i do that? This failed.

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

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

为此，我收到:"table.row不是函数"

For this i recieved: "table.row is not a function"

附加说明:该表使用分页，并且具有"selected"类的行被分配给该表.可能会出现在每个可行的分页上.

Additional notes: The table use pagination and the row with the class "selected" could be on every avivable pagination page.

最后，我想跳到该页的分页页面上的这一行.

At the end i want to jump to this row on the pagination page wich belong to this row.

推荐答案

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

The following notes assume you are using a recent version of DataTables. My example uses version 1.10.22.

修复错误

要修复您的"table.row不是函数"，请执行以下操作:问题，您可以更改以下行:

To fix your "table.row is not a function" problem, you can change the following line:

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

对此(注意大写的D):

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

您需要执行此操作的原因是因为您如何创建对 DataTables API的引用对象.可以通过以下三种方式中的任何一种来完成:

The reason you need to do this is because of how you create a reference to the DataTables API object. It can be done in any one of the following 3 ways:

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

在您的情况下，您混合使用了方法1和方法2.

In your case, you were using a mix of approaches 1 and 2.

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

Next, you need to change this:

var oSettings = table.fnSettings();

对此(请参见 settings() 函数):

to this (see the settings() function):

var oSettings = table.settings();

现在，您应该可以将表格行打印到浏览器控制台中，作为测试:

Now you should be able to print the table row to the browser console, as a test:

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

跳转到所需行

执行此操作的方法不只一种-但以下是一种简单的方法:

There is more than one way to do this - but here is one simple way:

首先，注册一个名为jumpToData()的新功能:

First, register a new function called 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;
  } );

在此处中对此功能进行了说明.

This function is documented here.

现在，您需要在该行中标识该行唯一的一条数据.在我的示例中，我使用的是标准DataTables示例数据-因此，我在下面的行中包含我们正在使用的selected类:

Now, you need to identify a piece of data in your row which is unique to that row. In my example, I am using the standard DataTables example data - so I have the following row which has the selected class we are using:

<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)中.

In my case, the row is uniquely identified by the name "Garrett Winters" in the first column (column index = 0).

因此，我可以这样做:

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

这里的重点是:在我的情况下，数据是作为一组值硬编码到HTML表中的值提供的，因此我使用data()[0]访问数据.如果数据是作为对象数组提供的，例如从JSON对象开始，那么我需要在这里使用其他语法-类似于data()[personName].

An important point here: in my case the data is provided as an array of values hard-coded into the HTML table, so I access the data using data()[0]. If the data had been provided as an array of objects, e.g. from JSON objects, then I would need to use a different syntax here - something like 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>

结果:

这篇关于我如何获得与数据表上的类的行的索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！