How to customize the size of pagination component

slolo

Link to test case: NA
Debugger code (debug.datatables.net): NA
Error messages shown: NA
Description of problem: Hello,

I would like to know if there is a way to add a classname to the pagination component like we can do with buttons.

Ex:

var oTable = $("#mytable").DataTable( {
    "buttons" : {
        "dom": {
            "button": {
                "className": "btn btn-sm"
            }
        },
        "buttons": [
            {
                "extend": "copyHtml5",
                "className": "btn-outline-secondary",
            },
            ...
            {
                "extend": "pdfHtml5",
                "className": "btn-outline-secondary",
                "orientation": "landscape"
            }
        ]
    },
    "pagingType": "full_numbers",
    "dom": "<'row'<'col-md-4'l><'col-md-4 text-center'B><'col-md-4'f>><'row'<'col-md-5'i><'col-md-7'p>>t<'row'<'col-md-5'i><'col-md-7'p>>"
} );

I cannot find in the documentation or in the forum an example to overload the default styling of pagination component.
For example, I would like to make it smaller by adding pagination-sm to its class.
I use bootstrap 4 in my program.

Thanks in advance for your help and have a nice day.

allan

There isn't actually an option to modify the class the DataTables uses for the Bootstrap pagination element. However, you could readily add it in the source - this is the line to tweak.

Or, add the class to the element after the draw - e.g.: https://live.datatables.net/waniceva/1/edit .

Allan

slolo

Hi @allan,

Thanks for this answer.

Even if I would prefer a way to do it by parameter, the second example do the job.

Perhaps in a next release you will add the possibility to customize the pagination component.