How to customize the size of pagination component

How to customize the size of pagination component

sloloslolo Posts: 33Questions: 6Answers: 0

Link to test case: NA
Debugger code ( 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.


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.

This question has an accepted answers - jump to answer


  • allanallan Posts: 61,617Questions: 1Answers: 10,089 Site admin
    Answer ✓

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


  • sloloslolo Posts: 33Questions: 6Answers: 0

    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.

Sign In or Register to comment.