Change CSS/style of datatable components

In the website programming world, tables are used in a lot of places to show the list of records, for example:

• List of users (users using the website portal)
• List of employees (in case of Payroll System)
• List of leaves (in case of Payroll System)
• List of invoices (in case of online payments)
• List of orders (for users of e-commerce website)

Above are some data lists shown in the form of a table.

To beautify the tables, some libraries are used so that tables are presented more gracefully along with some other operations like searching and sorting, etc. One such popular library is jQuery Datatable. For more information, please refer to the link: https://datatables.net/

The very basic Datatable UI is displayed as shown below:

For this basic configuration, please include the required datatable CSS and js files in thetag following is the HTML sample and js script:

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011-04-25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011-07-25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009-01-12</td>
            <td>$86,000</td>
        </tr>
        // Add more tr rows 
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

The js script is convert normal html table to datatable is:

new DataTable('#example');

As you can see in screenshot-1 some components have been added by the jQuery datatable library to the Normal HTML table like

• Show the Page Length dropdown at the left top of the table.
• Search
• Sorting up-down arrows on each column of datatable.
• Pagination at the end of the table.

We can change the CSS/style of these components in two ways:

• With Manual Css
• With datatable Events like preDrawCallback

1. Manual Css

Suppose we want to change the styling look (like rounded corners) of components like Page Length Dropdown and Search inputs as shown below:

Please add the following CSS for making UI of datatable components as shown in the above screenshot:

.dataTables_wrapper input, .dataTables_wrapper select {
     border-radius: 20px !important;
}

.dataTables_wrapper input {
     text-indent: 10px;
}

2. Datatable Events

We can either add custom CSS or via classes and append that class to inputs with datatable events like initComplete as shown below:

$('#example').dataTable({
    initComplete: function() {
        $('.dataTables_wrapper select, .dataTables_wrapper input').addClass('rounded-pill');
        $('.dataTables_wrapper input').addClass('rounded-pill-indent');
    }
});

For small datasets and client-side datatables, the initComplete event works perfectly to change the UI as shown in the screenshot-2. But for large data records or for server-side datatable, initComplete event shows the UI change effect after 1-2 seconds, which means the user can see the rectangular inputs/select initially for 1-2 seconds and then after 1-2 seconds, a new UI is displayed to the User.

initComplete event fires when all the data is loaded on the table.
Another important event is the drawCallback event, which means everything like data and datatable components is drawn on html table selector. With this event also, new CSS is reflected after 1-2 seconds.

So, the best event is the preDrawCallback event, which means CSS will be applied or classes will be appended to the datatable components before displaying to the user, which means the user can immediately see the CSS effects whenever datatable is loaded without seeing the original UI.

$('#example').dataTable({
    preDrawCallback: function() {
        $('.dataTables_wrapper select, .dataTables_wrapper input').addClass('rounded-pill');
        $('.dataTables_wrapper input').addClass('rounded-pill-indent');
    }
});