search

l-lin / angular-datatables

DataTables with Angular
https://l-lin.github.io/angular-datatables/
MIT License
1.57k stars 481 forks source link

Pagination not working with (bootstrap) tabs #1785

Closed pau1foster closed 2 months ago

pau1foster commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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

Looks like it'll be merged soon

pau1foster commented 2 months ago

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

shanmukhateja commented 2 months ago

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 commented 2 months ago

Hi @pau1foster

DataTables v2 support is now merged and released.

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

pau1foster commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

Hey @pau1foster

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

pau1foster commented 2 months ago

Thanks