Upgrading from 1.13.7 to 1.13.8 breaks pagination styling about dist-datatables-bootstrap5 HOT 16 OPEN

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.

from dist-datatables-bootstrap5.

Are you sure it was 1.13.7 to 1.13.8? There were no changes that will affect the paging tags: DataTables/DataTablesSrc@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.

from dist-datatables-bootstrap5.

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

from dist-datatables-bootstrap5.

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

from dist-datatables-bootstrap5.

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?

from dist-datatables-bootstrap5.

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 .

from dist-datatables-bootstrap5.

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"?

from dist-datatables-bootstrap5.

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?

from dist-datatables-bootstrap5.

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

yarn installed the datatables.net package twice:

[email protected]:
  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"

from dist-datatables-bootstrap5.

@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
-> 86d2b80
-> https://github.com/DataTables/Dist-DataTables-Bootstrap5/blob/86d2b8023327013537e2e82c4d4c491846b3756e/package.json

from dist-datatables-bootstrap5.

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.

from dist-datatables-bootstrap5.

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.

from dist-datatables-bootstrap5.

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

from dist-datatables-bootstrap5.

@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?

from dist-datatables-bootstrap5.

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

from dist-datatables-bootstrap5.

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.

from dist-datatables-bootstrap5.