Pagination not working with (bootstrap) tabs

[pau1foster]

We have two tabs each with a DataTable in, we use bootstrap classes nav nav-tabs, and button data-bs-toggle, data-bs-target to switch tabs. The passive tab when switched to does not paginate correctly, showing only 1 page even if it should show more. Every other parts of the DataTable looks ok, ie the info 'Showing 1 to 10 of 13 entries'.

This issue has been present since updating the following libraries to v2:

"datatables.net": "2.0.3",
"datatables.net-bs5": "2.0.3",
"datatables.net-buttons": "3.0.1",
"datatables.net-buttons-dt": "3.0.1"

--versions--
NodeJS version: 20.11.30
Angular version: 17.3.1
Angular CLI version: 17.3.2
jQuery version: 3.7.1
DataTables version: 2.0.3
angular-datatables version: 17.0.0

[shanmukhateja]

Hi @pau1foster

We currently do not support DataTables v2 officially yet. A PR is currently open for it.

I think this issue relates to potential server-side pagination related API response changes.

Can you check the documentation for Datatables.net? This library is simply a wrapper for the jQuery library with Angular goodies.

[pau1foster]

Thanks, is there a timeline/eta on the change to support v2 being released?

Looks like it'll be merged soon

[pau1foster]

Is there a beta version I can use to test if the PR fixes the issue?

[shanmukhateja]

Hi @pau1foster

We don't have a prebuilt artifacts ready for the code in the PR.

You will have to compile it locally for now. It currently passes all our unit tests so it can be considered stable.

Once it's merged, a new release will be available on NPM.

[shanmukhateja]

Hi @pau1foster

DataTables v2 support is now merged and released.

Please upgrade the library to v17.1.0 and test again.

[pau1foster]

Thanks @shanmukhateja it's fixed the issue.

Seeing an issue when trying to use DataTables namespace, ie

dtOptions: DataTables.Settings = {};

has an error: error TS2503: Cannot find namespace 'DataTables'.

can fix by setting DataTables.Settings -> any

but is there a fix for this? it's happening since the switch to 17.1.0. I can send over the angular.json setup, if that helps?

[shanmukhateja]

Hey @pau1foster

That is because 17.1.0 is a breaking change and not semver compatible.

You need to replace all instances of DataTables.Settings with Config from datatables.net

[pau1foster]

Thanks, final issue we have is that we're unable to re-render using the following:

this.dtElement.dtInstance.then((dtInstance: Api): void => {
    dtInstance.destroy();
    this.dtTrigger.next(this.dtOptions);
});

Have tried switching to Ajax but running into similar rendering issues. The initial render is fine. Planning to wait on subsequent updates to datatables net to see if they fix the issue.

[shanmukhateja]

Hey @pau1foster

The best way to initiate new updates is to reach out to them via their forums :)

[pau1foster]

Thanks