Datatables: responsive doesn't work with pagination

1k Views Asked by At

I ran into a problem that when opening tables(datatables) on a mobile device, "responsive"does not work. It works on the first page of the pagination, but when I switch to other (2, 3, 4, etc.) pages, the function is not available.

You can try it yourself: https://www.gotbootstrap.com/themes/smartadmin/4.5.1/datatables_buttons.html

open the page on your mobile device and go to the following pagination pages.

Please tell me if someone has encountered this problem, how it can be solved. Example:

Pagination page 1

Pagination page 1

Pagination page 3

Pagination page 3

1

There are 1 best solutions below

0
On BEST ANSWER

A bit hacky, but you can solve the issue by adjusting the columns when the pagination buttons are clicked:

$('.dataTables_paginate .paginate_button').click(function() {
  $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
});

Reference: https://datatables.net/reference/api/columns.adjust()