Jqxdatatable showDetails function to automatically switch pages if index does not exist

Question

I use the jqxDataTable plugin, I was able to successfully display the row data if the row index exists on the current page, I don’t know how to show the row data, if in the case of the row index on the next page or on any other page, I need help to complete this task please help someone please look at this jsfiddle

This is the script.

Created datatable with 3 times per page

 $("#dataTable").jqxDataTable({ width: 632, source: dataAdapter, pageable: true, pageSize: 3, .... .... .. some more code }); 

Button for displaying row information

Two buttons to display information about the rows in which the first one works, since the row index is on the current page, and the second does not.

  // Page 1 row - no issue $('#jqxbutton').click(function () { $("#dataTable").jqxDataTable('showDetails', 0); }); // Page 2 row - don't know how to switch page automatically $('#jqxbutton2').click(function () { $("#dataTable").jqxDataTable('showDetails', 5); }); 

Hope my question is clear, let me know if you need more details about the question.

Thanks.

Answer 1

If you are trying to go to a specific page, you can do: $("#dataTable").jqxDataTable('goToPage', 2); where 2 is the page index.

So, before the showDetails element on another page, you can do:

 $('#jqxbutton2').click(function () { var item = 6; var pageSize = $("#dataTable").jqxDataTable('pageSize'); $("#dataTable").jqxDataTable('goToPage', parseInt(item/pageSize)); $("#dataTable").jqxDataTable('showDetails', item); });