Home > database >  Add custom class to pagination ul in jquery datatable
Add custom class to pagination ul in jquery datatable

Time:04-10

I'm trying to add custom css to the jquery datatable (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 >
    <table  id="post_table">
        <thead >
            <tr>
                <th scope="col" >#</th>
                <th scope="col" >Title</th>
                <th scope="col" >Author Name</th>
            </tr>
        </thead>

        <tbody >
            <tr>
                <td>1</td>
                <td><h6 >Test title</h6></td>
                <td><h6 >Test author</h6></td>
            </tr>
        </tbody>
    </table>
</div>

I made this 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 :)

  • Related