How I can get the index of a row with a class on datatables

Question

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.

Answer 1

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: