Search code examples
jquerydatatabledatatables

Add custom class to pagination ul in jquery datatable

I'm trying to add custom css to the jquery datatable (https://datatables.net/).

I really need some help with the pagination. I'm using the sDom property to make the necessary divs in order to make the infromation and pagination look like in the bought template.

I've got the information part working, but I have an annoying 16 px margin-bottom on the pagination ul which I can't remove (or idk how to). I'll aatach a picture where I tried to show the problem.

This is the current sDom:

sDom:`tr
<"d-sm-flex justify-content-sm-between align-items-sm-center mt-4 mt-sm-3"
<"mb-sm-0 text-center text-sm-start text-success"
i>
<"mb-sm-0 d-flex justify-content-center"
<"pagination pagination-sm pagination-bordered mb-0"
p>>>`,

description

Please send some help, Thanks!

*EDIT: This is the js that creates the datatable:

$('#post_table').DataTable({
    order: [['0', 'asc']],
    responsive: true,
    ordering: true,
    sDom:`tr
    <"d-sm-flex justify-content-sm-between align-items-sm-center mt-4 mt-sm-3"
    <"mb-sm-0 text-center text-sm-start text-success"
    i>
    <"mb-sm-0 d-flex justify-content-center"
    <"pagination pagination-sm pagination-bordered mb-0"
    p>>>`,
    searching: true,
    paging: true,
    pagingType: "simple_numbers",
    language: {
        paginate: {
            previous: 'Prev',
        },
        info: "Showing _START_ to _END_ of _MAX_ posts", // without filter
    },
    displayLength: 10
});

And this is the HTML in the page:

<div class="table-responsive border-0">
    <table class="table align-middle p-4 mb-0 table-hover table-shrink" id="post_table">
        <thead class="table-dark">
            <tr>
                <th scope="col" class="border-0 rounded-start">#</th>
                <th scope="col" class="border-0">Title</th>
                <th scope="col" class="border-0">Author Name</th>
            </tr>
        </thead>

        <tbody class="border-top-0">
            <tr>
                <td>1</td>
                <td><h6 class="course-title mt-2 mt-md-0 mb-0">Test title</h6></td>
                <td><h6 class="course-title mt-2 mt-md-0 mb-0">Test author</h6></td>
            </tr>
        </tbody>
    </table>
</div>

I made this jsfiddle to give a reproducible example, but as I've tested it, with the default bootstrap 5 loaded it is working fine. Sadly I can not upload the whole template to the site to check with it fully. Please let me know if it is solvable with these informations. If not, then I'll remove the question and try to figure it out myself.

Solution

  • Looking at your jsfiddle, the margin comes from Bootstrap5 CSS rules:

    enter image description here


    So it looks to me very simple, you can **override** the Boostrap rule with your own CSS rule. 
    // add myCustomClass to the pagination element
sDom:`tr
    <"d-sm-flex justify-content-sm-between align-items-sm-center mt-4 mt-sm-3"
    <"mb-sm-0 text-center text-sm-start text-success"
    i>
    <"mb-sm-0 d-flex justify-content-center"
    <"pagination pagination-sm pagination-bordered mb-0 myCustomClass" // <= myCustomClass
    p>>>`




/* then, add CSS rule for ul.pagination child of .myCustomClass */
.myCustomClass ul.pagination {
  margin-bottom: 0 !important;
}

    That said, personally I find it much better WITH the bottom margin rather than not :)