Row Index

When data is loaded into a DataTables object, it is assigned a row index - basically, it is added to an array structure. Rows are loaded in the order they are presented to DataTables - for example, when parsing a JSON source, or when loading the contents of a pre-populated HTML table:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<table id="example" class="display dataTable cell-border" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>

        [not all rows shown]

        <tr>
            <td>Michael Bruce</td>
            <td>Javascript Developer</td>
            <td>Singapore</td>
            <td>29</td>
            <td>2011/06/27</td>
            <td>$183,000</td>
        </tr>
        <tr>
            <td>Donna Snider</td>
            <td>Customer Support</td>
            <td>New York</td>
            <td>27</td>
            <td>2011/01/25</td>
            <td>$112,000</td>
        </tr>
    </tbody>
</table>

So, Tiger Nixon is assigned to row index 0 internally in DataTables. This row index never changes, as long as the DataTables object exists and the row is not removed from the DataTables object.

We can use these indexes in various ways, for example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
$(document).ready(function() {

  var table = $('#example').DataTable();
  //
  // get the internal index of a row:
  //
  var idx = 1;
  var row = table.row( idx ).data();
  console.log(row[0] + ' has internal row index ' + idx);

  idx = 2;
  var row = table.row( idx ).data();
  console.log(row[0] + ' has internal row index ' + idx);

} );

Output:

Garrett Winters has internal row index 1
Ashton Cox has internal row index 2

Display Position

However, we may also want to know where a row is displayed in a table - its visual position, like a row number in a spreadsheet.

We may also need to take into account the fact that the row may not be on the current page (assuming DataTables pagination) - and not even part of the DOM. jQuery cannot help us in this case.

We can use the indexOf() function to find the first occurrence of an item in a DataTables API object:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).ready(function() {

  var table = $('#example').DataTable();

  //
  // get the display position of a row:
  //
  var name = 'Cedric Kelly';
  console.log( name + ' is at table row ' + (getPosition( 0, name ) +1) );

  name = 'Charde Marshall';
  console.log( name + ' is at table row ' + (getPosition( 0, name ) +1) );

  function getPosition( colIdx, value) {
    return table.column( colIdx, {order: 'current'} ).data().indexOf( value );
  }

  //
  // get the page and row-in-page positions:
  // see also: https://datatables.net/plug-ins/api/page.jumpToData()
  //
  var pos = getPosition( 0, name );
  if ( pos >= 0 ) {
    var pageLen = table.page.info().length;
    var pageNum = Math.floor( pos / pageLen );
    var rowInPage = pos - ( pageLen * pageNum );
    console.log( name + ' is at page ' + (pageNum +1) + ' row ' + (rowInPage +1) );
  }

} );

Output:

Cedric Kelly is at table row 10
Charde Marshall is at table row 11
Charde Marshall is at page 2 row 1

This example uses column( columnSelector, modifier ), where:

  • columnSelector is an integer
  • modifier is the object {order: 'current'}

In this case, the modifier is a DataTables selector-modifier where current means rows are processed in the order they are currently applied in the table (accounting for sorting and filtering).