jqxdatatable showDetails function automatic page switch if index doesn't exist

Question

I am using jqxDataTable plugin, I could able to show row details successfully if row index exists in current page, I don't know how to show row details if in case row index is in next page or any other page, I need some help to accomplish this task please someone help, Please have a look on this JSFiddle

This is scenario

Created datatable with 3rows per page

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

Button to show row details

Two buttons to show row details, in which first one works since row index is in current page, second button doesn't.

 // 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 detail about the question.

Thank you.

Answer 1

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

So, to showDetails of an item 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);
});