如何在数据表上使用类获取行的索引 [英] How I can get the index of a row with a class on datatables

问题描述

我想获取具有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();

您需要这样做的原因在于您如何创建对

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();

For this I received: "table.row is not a function"

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

At the end I want to jump to this row on the pagination page which belong to this row.

解决方案

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

Fixing Errors

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

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

to this (note the upper-case D):

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

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 );

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

Next, you need to change this:

var oSettings = table.fnSettings();

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' ) );

Jumping to The Required Row

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

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.

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>

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

Therefore I can do this:

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

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].

The whole thing is as follows:

<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>

The result:

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