How to apply default pagination style using vue-3 package?

pweil

I've got a DataTables table in Vue 3 (I'm also using Inertiajs, Vite, and Laravel 9). The "display" class applied the DataTable element and the table is showing those styles, even without datatables.net-dt imported (maybe it's already embedded?). Great. But the pagination has no styling whatsoever. Assuming the there are default style for the pagination, how can I get them applied -- preferably just to this one Vue component? I don't need any advanced or fancy styling for this, just the basic pagination styling. Do I even need to import datatables.net-dt at all, and if so where should it go? I can't do a test case at this point; I'd just like to find out what I would normally need to do to apply the default styling to pagination, especially since I am getting styling for the table itself.

pweil

I've solved this issue by copying all of the css in the live example linked in the DataTables Vue section. As fas as I could tell, the css in datatables.net-dt had no relevant css for the pagination, and was missing other css, such as the sorting indicators. How strange. Something seems wrong with `datatables.net-dt and its css file. Or maybe it's for some other version of DT. In any case, this is pretty odd; it should have worked out of the box. Has no one else seen this?

allan

Are you using a styling framework such as Bootstrap perhaps? datatables.net-dt definitely includes the CSS needed for the default paging controller, but not if you were using one of the other styling integrations.

If you can link to the page / example showing the issue, I would be able to say what is going wrong.

Allan

pweil

@allan No, I'm not using any style framework. I can't link to the page because it's not publicly-viewable. But I can see that the classes that get put on the pagination elements don't even exist in the default style sheet. I can show various sections of the html I have (generated by dataTables), and any can see that the classes don't match what's in the default stylesheet. For example, the paginator container is:

<div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate"><a class="paginate_button previous disabled" aria-controls="DataTables_Table_0" aria-disabled="true" role="link" data-dt-idx="previous" tabindex="-1" id="DataTables_Table_0_previous">Previous</a><span><a class="paginate_button current" aria-controls="DataTables_Table_0" role="link" aria-current="page" data-dt-idx="0" tabindex="0">1</a>
[etc]</div>

But the default stylesheet doesn't even have dataTables_paginate or paging_simple_numbers. And everything in the default stylesheet is within div.dt-container, which doesn't exist in the html that gets generated by dataTables on my site. Here's another class in the css I copied that matches my html, but is completely absent from the default stylesheet: .dataTables_wrapper .dataTables_paginate .paginate_button.disabled. It's like a complete disconnect.

Somehow, the css in the live example (shown in the Vue section of the docs) is completely different and has classes that match the html the my dataTables is generating. I don't know where that css actually comes from, but it works perfectly.

allan

Those are DataTables 1.x class names. If you have DataTables 2 CSS loaded, then yes, they wouldn't be styled.

That's the first time I've seen the DT2 JS mixed with the DT1 CSS. I'm not sure how that would happen. I'd really need a way to reproduce it to be able to help resolve it.

Allan

pweil

I figured it was something like that, but why? I just followed the manual for installing the modules.

import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
 
DataTable.use(DataTablesCore);

And then npm install --save datatables.net-dt

So am I getting DT1 or DT2 html? And which css is DT1 css, and which is DT2 css?

What might I have done wrong?

pweil

I just took a peek at the datatables.net module inside my node_modules folder:

/*! DataTables 1.13.11
 * ©2008-2024 SpryMedia Ltd - datatables.net/license
 */

I'll remove it and try again, and see what version I get. After looking on the github repo, I should be getting

/*! DataTables 2.0.1
 * © SpryMedia Ltd - datatables.net/license
 */

allan

You aren't actually getting any CSS from that. datatables.net-dt is the styling package, which you would need to reference in your CSS.

Here is a working example. Perhaps you can create a Stackbltiz showing the issue you are having please? At the moment, there isn't much I can debug.

Allan

pweil

@allan I wiped all of the DT packages from package.json and reinstalled datatables.net-vue3. Now the css is working. Go figure. Somewhere, somehow I had gotten the wrong file or package. That was a weird one. Anyway, thanks for indulging me and implicitly prodding me to reinstall.

allan

All good - glad to hear it is working now

Allan