Customize font and layout of datatable pagination and showing x to x entries

1 reply · opened Oct 24, 2020

CCOALspotOct 24, 2020

Hi,
I initiate datatables as so

jQuery(document).ready(function() {
        $('#datatable1').dataTable();
    });

My pagination and showing xx overlaps,as you can see in the screen shot.
How do i customize the layout and font ? i plan to put the pagination on the next line and center it

Thanks

SSemicolon WebSTAFFOct 24, 2020

Hello,

Since this is a 3rd Party Plugin: https://datatables.net/examples/styling/bootstrap4.html, you will need to use Custom Codes and modify these manually, as we currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy .

As a starter, you can consider using the following code:
[ch_pre type="css"].dataTables_wrapper .row:nth-child(3) {
flex-direction: column;
align-items: center;
}

.dataTables_info {
margin-top: 1rem;
text-align: center;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
margin-top: 1.5rem;
justify-content: center;
}[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard