add class for nav.pagination sometimes ignored

add class for nav.pagination sometimes ignored

MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2

Link to test case: https://live.datatables.net/qelelegu/10/edit
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi,

I'm trying to understand the reason why the CSS I'm adding to nav.pagination doen't always apply on the table.

I have the feeling that is happenig when all the pages are shown bu default with pageLength: -1 but I'm not sure of my theory.

Here a test case (I was too lazy to create a new one from scratch, so I took an old one I've created recently).
For the first table, the pagination buttons will be round but not for the other tables.
If you change the lenght in the menu for 5 for example, the buttons will be round.
https://live.datatables.net/qelelegu/10/edit

On my website, it happens on pages :
- with or without tabs
- containing only one table
- with pageLength: -1.

Should I change my settings for adding the CSS ?
I could change de .js datatables file but I prefer not too (because I forgot do do it after an update)

Thanks

This question has an accepted answers - jump to answer

Answers

  • MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2

    A little more infos, I've just seen that of you change the size of the window, the CSS is lost for the default one.

    Another test case, really basic
    https://live.datatables.net/sinarumi/1/edit

    You can see the small rounded page number buttons when the DT is loaded. But if you changing the size of the window, the buttons will have the square default format and size.

  • allanallan Posts: 63,352Questions: 1Answers: 10,443 Site admin
    Answer ✓

    What is happening is that the pagination control is being redrawn whenever the window resizes to allow it to be responsive (i.e. it recomputes what buttons should be shown on each resize).

    As this is a part of Bulma, and also DataTables now always includes a nav element for pagination, I've added an option to its class list that can be used to control the classes for the nav:

    DataTable.ext.classes.paging.nav = 'pagination is-rounded is-small';
    

    That will be in the nightly build soon.

    Allan

  • MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2

    Thanks Allan.
    I will follow the new updates

Sign In or Register to comment.