responsive modal display : navigation between rows

MelodyNelson

Link to test case: https://live.datatables.net/nagubura/13/edit
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi,

I'm wondering if I can add a navigation system between the rows (previous / next) in the responsive modal display details.

With the row index it seems realistic, but I don't know if it's a crazy idea or not in this context.

For the moment, my first idea was this one just to find the rows index and return something, but it needs more controls and the navigation buttons or links of course.

(you can laugh at my beginner code)

https://live.datatables.net/nagubura/13/edit

kthorngren

No reason to laugh at your code. Its a nice first try at solving your solution

Looks like you are trying to use the row().index(). The row().index() is the order the rows are loaded and not changed when sorting is changed. Using the row().index() for this case probably won't work.

The example from this thread seems to work well. Maybe it will help.

It relies on having a row ID defined. The example has hard coded tr ID's defined in HTML. If you are using ajax or data to load the data the rowId can be used to set the row ID assuming you have a column with unique data.

Basically the $(document).on('click', '.dtr-control' event handler finds the next previous and next row ID's which are saved in global variables. The prev / next buttons event handlers use jQuery trigger() to close the current and open the prev/next row.

Kevin

MelodyNelson

Thanks Kevin

I will read a few more time your answer and the example (really nice one) after a the weekend, it's too blurry for me tonight.

MelodyNelson

Thanks at lot Kevin for the reference to this perfect example, I couldn't write this code by myself.
If you're reading this, thanks TeeHill for your work on the navigation between rows for the details display.

MelodyNelson

I have a question related to the row ID : must I start by zero ?
Is it a « convention / best practice » or it is a « must do » ?
I've tried to start my IDs with 0 or 1, the navigation works well in both case.

kthorngren

The only requirement for the row ID is that its unique data. It can start with 0 or 1 and act like an index. It can be a [UUID](https://www.techtarget.com/searchapparchitecture/definition/UUID-Universal-Unique-Identifier#:~:text=A%20UUID%20(Universal%20Unique%20Identifier,UUID%20generated%20until%20A.D.%203400.) or other value as long as it is unique on the page. You can read more about the ID attribute here.

Kevin

MelodyNelson

Thanks Kevin, I've used an unique iD in the dataset for the data and use the rowId
The WebServer is a 4D App, so I've used a standard numeration to give different IDs.
https://doc.4d.com/4Dv19/4D/19.6/Selected-record-number.301-6270469.en.html