jQuery DataTables - get page of a given row

Question

I have a dataTable with hundreds of items with a fixed 50 iDisplayLength option. I need to be able to find what page a specific row is within the loaded nodes.

All I've managed is to get the position, unfortunately that internal row position does not correspond to the row index with the current sorting and filtering.

As an example here on jsFiddle. I can retrieve the position or row #tr4 (position 3) but the iDisplayStart I need is 2.

<table id="example">
      <thead>
          <tr>
            <th>ID</th>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
          </tr>
        </thead>
        <tbody>
          <tr id="tr1" class="odd gradeX">
            <td>1</td>
            <td>Trident</td>
            <td>Internet Explorer 4.0</td>
            <td>Win 95+</td>
            <td class="center"> 4</td>
            <td class="center">X</td>
          </tr>
          <tr id="tr2" class="even gradeC">
            <td>2</td>
            <td>Trident</td>
            <td>Internet Explorer 5.0</td>
            <td>Win 95+</td>
            <td class="center">5</td>
            <td class="center">C</td>
          </tr>
          <tr id="tr3" class="odd gradeA">
            <td>3</td>
            <td>Trident</td>
            <td>Internet Explorer 5.5</td>
            <td>Win 95+</td>
            <td class="center">5.5</td>
            <td class="center">A</td>
          </tr>
          <tr id="tr4" class="even gradeA">
            <td>4</td>
            <td>Trident</td>
            <td>Internet Explorer 6</td>
            <td>Win 98+</td>
            <td class="center">6</td>
            <td class="center">A</td>
          </tr>
          <tr id="tr5" class="odd gradeA">
            <td>5</td>
            <td>Trident</td>
            <td>Internet Explorer 7</td>
            <td>Win XP SP2+</td>
            <td class="center">7</td>
            <td class="center">A</td>
          </tr>
    </tbody>
</table>

var oTable = $("#example").dataTable({
    "sDom": '<"clear">rtip<"clear">',
    "bPaginate": true,
    "iDisplayLength": 2,
});

var row = $(oTable.fnGetNodes()).filter("#tr4");
console.log(row[0]);

var position = oTable.fnGetPosition(row[0]);
console.log(position);

console.log(oTable.fnSettings()._iDisplayStart);;

// position is 3 but the page displayStart I need is 2.

Answer 1

I ended up writing a small dataTable plugins for it:

// get the page of a given item in order to paginate to it's page on load
$.fn.dataTableExt.oApi.fnGetPageOfRow = function (oSettings, iRow) {
    // get the displayLength being used
    var displayLength = oSettings._iDisplayLength;

    // get the array of nodes, sorted (default) and using current filters in place for all pages (default)
    // see http://datatables.net/docs/DataTables/1.9.beta.1/DataTable.html#%24_details for more detals
    var taskListItems = this.$("tr", { "filter": "applied" });

    // if there's more than one page continue, else do nothing
    if (taskListItems.length <= displayLength) return;

    // get the index of the row inside that sorted/filtered array
    var index = taskListItems.index(iRow);

    // get the page by removing the decimals
    var page = Math.floor(index / displayLength);

    // paginate to that page 
    this.fnPageChange(page);
};

Pass in the iRow and it'll paginate to that item's page.

Answer 2

I've written a function to move you to the page with the given row. However, it uses newer API. The part inside the if is what you want.

function moveToPageWithSelectedItem() {
    var numberOfRows = itemsTable.data().length;
    var rowsOnOnePage = itemsTable.page.len();
    if (rowsOnOnePage < numberOfRows) {
        var selectedNode = itemsTable.row(".selectedItem").node();
        var nodePosition = itemsTable.rows({order: 'current'}).nodes().indexOf(selectedNode);
        var pageNumber = Math.floor(nodePosition / rowsOnOnePage);
        itemsTable.page(pageNumber).draw(false); //move to page with the element
    }
}

Answer 3

In 1.10 you could simply do:

table.rows( { order: 'applied' } ).nodes().indexOf( ... );

Assuming you are working with a tr node.

edit - sorry that gets the position in the data set. You would need to use the information from page.info().len to then divide that index and get the page number.