JQuery DataTables - get page of this row

Question

I have a dataTable with hundreds of elements with a fixed option of 50 iDisplayLength. I need to find which page contains a specific row in loaded nodes.

All I managed to do was get the position, unfortunately, the internal position of the row does not match the row index with the current sorting and filtering.

As an example here, on jsFiddle . I can get position or line # tr4 (position 3), but I need iDisplayStart 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

As a result, I wrote small dataTable plugins for it:

 // get the page of a given item in order to paginate to it 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 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); }; 

Go to iRow and it will be paginated by this element.

Answer 2

In 1.10, you can simply do:

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

Assuming you are working with tr node.

edit - sorry to get a position in the data set. You will need to use the information from page.info().len to then split this index and get the page number.

Answer 3

Use fnPagingInfo

  $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings ) { return { "iStart": oSettings._iDisplayStart, "iEnd": oSettings.fnDisplayEnd(), "iLength": oSettings._iDisplayLength, "iTotal": oSettings.fnRecordsTotal(), "iFilteredTotal": oSettings.fnRecordsDisplay(), "iPage": Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ), "iTotalPages": Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength ) }; }; $(document).ready(function() { $('#example').dataTable( { "fnDrawCallback": function () { alert( 'Now on page'+ this.fnPagingInfo().iPage ); } } ); } ); 

http://datatables.net/plug-ins/api

Answer 4

I wrote a function to move you to a page with the specified line. However, it uses the new 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 5

The given variables are table and tr :

 Math.floor( table.rows({ page: 'all', order: 'current', search: 'applied' }).nodes().indexOf( tr ) / table.page.info().length ) 

Note that you may not need to apply the current search if you are not using filtering.

Answer 6

I needed to programmatically find a row in a datatable, split the table into a page for the corresponding row, and expand that row. I know that some people have created custom libraries to handle it, but I would expect such basic functionality out of the box. Anyway, this is what I did. This is not ideal, but it can help.

• Using jquery to get a table object
• Get the nodes of the table (rows) and the number of nodes; this is important and necessary, because the table object has only those rows that you see on the current page.
• Since the page size of the table can be changed by the user, and there is no function to retrieve the page, I saved it in local storage so that I could get it. I know that I can get something like var pageSize = oTable.fnSettings () ._ iDisplayLength; But I prefer not to refer to the internal implementation of the object.
• Find the column number you are looking for
• Find row # for the row that has the corresponding column (first) in this case.
• Calculate page #
• Go to the page and use the timeout to load the page
• Use jquery to trigger any action that you want to invoke on the corresponding line (e.g. expand).

Here is a sample code:

 let oTable = $('table#transactions').dataTable(), nodes = oTable.fnGetNodes(), totalRows = oTable.fnGetData().length, pageSize = vmTable.pageLength, idColumn = Object.keys(vmTable.columns).indexOf('column_name_to_be_matched'), matchedPage = 0; for (var i=0; i<totalRows; i++){ if (searchValue) === parseInt(nodes[i].cells[idColumn].innerHTML)) { matchedPage = Math.floor(i/pageSize); break; } } if (matchedPage > 0) oTable.fnPageChange(matchedPage); $timeout(function() { $(`table#transactions ul[aria-labelledby="dd${searchValue}"] span.expand`).parent().trigger('click'); }, 800);