Upgrading from 1.13.7 to 1.13.8 breaks pagination styling

[jlariza]

Good day,

I'm using this package to style my dataTables using Bootstrap5. This is how the pagination looks like with 1.13.7 version.

And the code uses a ul tag

However, after installing the update, the pagination looks like this:

And it uses span tags instead of the ul list element.

Was that intended? How may I keep the current look and use the latest version of the package?

Thank you

[AllanJard]

Are you sure it was 1.13.7 to 1.13.8? There were no changes that will affect the paging tags: https://github.com/DataTables/DataTablesSrc/compare/1.13.7...1.13.8 .

In fact, looking at our Bootstrap 5 integration, it still uses ul/li.

Perhaps you forgot to include the Bootstrap 5 integration file for DataTables? If it isn't that, can you link to a test case showing the issue please.

[Biszu]

@jlariza Were you able to solve it? I'm facing the same problem.

[AllanJard]

@Biszu It seems to work okay in the example. Can you link to a test case showing the issue please?

[Biszu]

In my case it happened when using Datables with NPM and ES modules as instructed on https://datatables.net/download/index When I switched to the CDN version it worked fine — just like in the example.

My full setup was:

import jszip from 'jszip';
import DataTable from 'datatables.net-bs5';
import 'datatables.net-buttons-bs5';
import 'datatables.net-buttons/js/buttons.html5.mjs';
import 'datatables.net-fixedcolumns-bs5';
import 'datatables.net-fixedheader-bs5';

@AllanJard Can you advise how I can provide an example that uses npm & ES modules?

[AllanJard]

Yes, you could use https://stackblitz.com/ . Here is an example of Bootstrap 5 with DataTables working in StackBlitz: https://stackblitz.com/edit/vitejs-vite-j2m9yz?file=src%2Fmain.ts%2Cindex.html%2Csrc%2Fstyle.css&terminal=dev .

[blankse]

We have the same issue.

I think it can be because this package have the "datatables.net" dependency fixed to version "1.13.8". Other plugins have it to version "^1.13.0". So yarn installed two version for me. The bs5 plugin have so a own instance of datatables and so the style is wrong.

@AllanJard Why is the version fixed to a older version of "datatables.net"?

[AllanJard]

The dependency on datatables.net of this package (datatables.net-bs5) will exactly match the release version of this package since they are released together. e.g. if this was x.y.z, then the dependency on datatables.net would also be x.y.z.

I'm not sure I see how that would break the paging styling though? Perhaps you can create a stackbltiz example showing the issue please?

[blankse]

@AllanJard Here can you see it: https://stackblitz.com/edit/vitejs-vite-ecmkwg

yarn installed the datatables.net package twice:

datatables.net@1.13.8:
  version "1.13.8"
  resolved "https://registry.yarnpkg.com/datatables.net/-/datatables.net-1.13.8.tgz#05a2fb5a036b0b65b66d1bb1eae0ba018aaea8a3"
  integrity sha512-2pDamr+GUwPTby2OgriVB9dR9ftFKD2AQyiuCXzZIiG4d9KkKFQ7gqPfNmG7uj9Tc5kDf+rGj86do4LAb/V71g==
  dependencies:
    jquery ">=1.7"

datatables.net@^1.13.0:
  version "1.13.10"
  resolved "https://registry.yarnpkg.com/datatables.net/-/datatables.net-1.13.10.tgz#4527e2b5428394732331c8b7db8fa20a56c0cc7b"
  integrity sha512-lVjpXGX9VzOpiPYnJ/KxOsYMAVa3oc3UniYGGo6pLBVCyajzMo80yisgXRz8J392wkZOc3bpp6VPs2pDbpKlyw==
  dependencies:
    jquery ">=1.7"

[blankse]

@AllanJard

The dependency on datatables.net of this package (datatables.net-bs5) will exactly match the release version of this package since they are released together. e.g. if this was x.y.z, then the dependency on datatables.net would also be x.y.z.

This is not correct. The release 1.13.10 of datatables.net-bs5 requires version 1.13.8 of datatables.net See: https://github.com/DataTables/Dist-DataTables-Bootstrap5/releases/tag/1.13.10 -> https://github.com/DataTables/Dist-DataTables-Bootstrap5/commit/86d2b8023327013537e2e82c4d4c491846b3756e -> https://github.com/DataTables/Dist-DataTables-Bootstrap5/blob/86d2b8023327013537e2e82c4d4c491846b3756e/package.json

[AllanJard]

Ah damn. My statement was correct in that is what it should be. Unfortunately, that dependency is an error. I need to write some new release scripts for the legacy v1 DataTables since the release scripts I use are all for v2 now.

I think that is probably a new issues from the original one that was reported here, but the effect might be the same.

[blankse]

As workaround we can add this to the package.json

{
  "resolutions": {
    "datatables.net": "1.13.8"
  }
}

Yarn then installs only version 1.13.8 of datatables.net.

[BayBreezy]

Having a similar issue with the UI library that depends on DT. Even if i try pinning down or override the version of datatables.net, the styles break. And I am assuming that this change also cause the buttons to stop loading. The implementation can be found here: https://ui-thing.behonbaker.com/components/datatable#usage

[AllanJard]

@BayBreezy Can you use https://stackblitz.com/ or a git repo to create a test case showing the issue so I can look into it please?

[BayBreezy]

Hey @AllanJard , here is a link to the reproduction: https://stackblitz.com/edit/nuxt-starter-gtvsks?file=nuxt.config.ts,plugins%2Fdatatables.client.ts,app.vue,components%2FUi%2FDatatable.client.vue

Just to explain what is happening if you are not familiar with Nuxt3, I have 4 files open.

• nuxt.config - The important part here is that we are adding the link to pdfMake in the config
• datatable.client.ts - Here is where we initiate the different extensions and stuff that DT may need(buttons, select etc..)
• app.vue - Here we are rendering the Datatable component from our app. We pass the data and the config.
• Datatable.client.vue - this is the client only component of DT. Inside this file is where I override the styles for DT. I am using TailwindCSS to style the table w/ the shadcn/ui type styling

Please let me know if you have any questions.

As you will notice in the config, I am setting the dom value to <'p-1'>Q<'flex flex-col lg:flex-row w-full lg:items-center lg:justify-between gap-5 mb-5'Bf><'border rounded-lg't><'flex flex-col lg:flex-row gap-5 lg:items-center lg:justify-between pt-3 p-5'li><''p>

Sadly, the buttons are loaded since the update to V3 of DT and the query builder is not loading either. I also configure the buttons array inside the config object

[BayBreezy]

UPDATE

So I got everything to work by overriding the versions of datatables.net & datatables.net-dt that was installed. In my package.json file, I added

  "overrides": {
    "datatables.net": "1.13.10",
    "datatables.net-dt": "1.13.10"
  }

Everything loaded fine, even after build.

[AllanJard]

I've released DataTables 1.13.11 which should address this error.

DataTables 2.0.1 is also now available with v1 being in maintenance mode.