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

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

pweilpweil Posts: 12Questions: 2Answers: 0

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.

Answers

  • pweilpweil Posts: 12Questions: 2Answers: 0

    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?

  • allanallan Posts: 63,441Questions: 1Answers: 10,459 Site admin

    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

  • pweilpweil Posts: 12Questions: 2Answers: 0

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

  • allanallan Posts: 63,441Questions: 1Answers: 10,459 Site admin

    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

  • pweilpweil Posts: 12Questions: 2Answers: 0

    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?

  • pweilpweil Posts: 12Questions: 2Answers: 0

    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
     */
    
  • allanallan Posts: 63,441Questions: 1Answers: 10,459 Site admin

    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

  • pweilpweil Posts: 12Questions: 2Answers: 0

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

  • allanallan Posts: 63,441Questions: 1Answers: 10,459 Site admin

    All good - glad to hear it is working now :)

    Allan

Sign In or Register to comment.