DataTables scroll to row with ajax paginated data

Question

In DataTables I can automatically add an ID to each <tr> row of my table by specifying DT_RowId in my ajax response data. This means that each row gets an id attribute, e.g.

<tr id="row_45">
    <td>foo</td>
    <td>bar</td>
</tr>

This is useful in my application because it means I can use URL's such as: /#row_45 and show row 45 at the top of the page.

This works fine providing the rows are on page 1.

My application shows 250 rows per page and each page is generated with an ajax request. Sometimes there are >1000 pages. So if I tried to open row 999 (/#row_999) in the same way, it doesn't work, because the data for it isn't within the document.

I am using pagination and DataTables in "serverSide" mode. This means that all of the data is not present on page load - making this problem harder. If I click "page 3" in the pagination it does an ajax request for records 750 - 1000 (250 per page).

Does anyone know if there's a workaround to this?

DataTables version 1.10.16

Answer 1

This is how StackOverflow refers to a unique entity using a URI and uses a DOM identifier to navigate within the webpage rendered by the browser.

https://stackoverflow.com/questions/55000320/datatable-with-filter-data-dynamically/55000876#comment96759679_55000876

You have to apply a similar principle to your application. I think DataTables docs and especially the examples section cover a lot of use cases for server-side processing mode.

You have to design this into your application. There is no simple workaround.

Docs

• Server side processing - Examples
• Server side processing - Manual

Featured content

• Deep linking into DataTables
• Keep Conditions plug-in - refered from previous article about Deep linking

Answer 2

Is it safe to assume that the number in the id is a consecutive running number form 0?

Then we could determine the page number from the id and make dataTables load the correct page:

var rowIdx = '#row_45'.split('_')[1];
var table = $('#substancesTable').DataTable();

// Page number
var pageNo = Math.floor(rowIdx/table.page.info().length);

// Load page
table.page(pageNo).draw('page');

// Add scroll function if needed

Edit: if a server request is needed to determine the page where the row is, then it is made first:

// Make an ajax-call to get the rowIdx
var rowIdx = someAjaxFunctionToRequestThePageNo( '#row_45'.split('_')[1] );

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

// Page number
var pageNo = Math.floor(rowIdx/table.page.info().length);

// Load page
table.page(pageNo).draw('page');

// Add scroll function if needed

Answer 3

The key to solving this - which nobody really addressed - is this: As stated in the question we are using DataTables in serverSide mode. It has pagination and when you click on each page it makes a separate ajax request to load just the data for that page. So for example if you click page 2, 3, 4 it is making 3 separate ajax requests - one per page. Herein lies the problem - if you want to scroll to row 999 you have to answer the question "on what page does row 999 appear"?

The only way you can do this is to call a serverside script which will calculate the page number and return it to the js used by the application. The reason this is needed is because if, for example, you were on page 1 and row 999 happens to be on page 4, you do not have the rows for page 4 anywhere in the DOM; indeed you wouldn't have these at all until you click page 4 on the pagination.

So, the first thing to do is to make an ajax request to an endpoint that calculates this page number and returns an integer. How the page number is calculated depends on the application. @Sascha Gottfried has kind of hinted at this in their answer. In our application the rows are not sequential, i.e. you could have row_999 followed by row_1052:

• If they are sequential you could do something equivalent to ceil(999/250) which would tell you that row 999 appears on page 4, when there are 250 records per page.

• If they are NOT sequential (as is the case in my application) the endpoint must provide a means of calculating it. There is no set answer to how you do this. In our application it depends on multiple search/filter parameters which can result in rows being out of sequence. However all the script needs to do is return an integer, e.g. echo json_encode(['page' => 4]);

Once this number is calculated you have to trigger the equivalent click for "page 4" (or whatever page number you want) in DataTables. This can be done in jquery by targetting the anchors inside .dataTables_paginate.

Then, you have to scroll down to the row - some information was provided by @ygorbunkov relating to this. Missing or not obvious is that you have to wait until the ajax request to populate the DataTable has completed before you attempt to scroll to the row - otherwise the data is not present to scroll to. This can be done by nesting a .done() in the ajax request to the endpoint which gets the data for page 4.

Although this is an incomplete answer these are the principles that are required. In the end we actually abandoned doing this in our application because the complexity of trying to implementing it outweighed any benefit!

Answer 4

Native Javascript has scrollIntoView :

var el = getElementById('row_4');
el.scrollIntoView(true);