CODEWITHSUNDEEP
jquerycsspaginationdatatables
greengrassbluesky
greengrassbluesky

Reputation: 373

jQuery responsive Datatables Customize CSS and Pagination

I am using jQuery and jQuery datatables (1.10.1) to create a "responsive" datatables. I am trying to customize 2 things 1. Look and feel by giving my own CSS 2. Pagination and search controls.

Here is the fiddle - http://jsfiddle.net/urwyrj89/

I have added my own CSS but it does not seem to take it because my CSS has background-color which does not show up on UI :

.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #d6e9f8;
    text-align: left;
    border: 1px solid #ccc;
    font-size: 11px;
    padding: 4px;
    color: #333;
}

But it never applies it. I tried putting the class directly as well as substituting at run time in jQuery. I am new to this, so will appreciate some pointers ?

Also, I want to customize the pagination control. Instead of default view i.e.

enter image description here

I want the control to be like below and also, the positioned to both on top and bottom

enter image description here

Is that customization possible? Any pointers on how to achieve it ?

Upvotes: 1

Views: 8283

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58860

You have to apply your style using the rule below or use !important which is less preferable.

table.dataTable.tablesorter thead th, 
table.dataTable.tablesorter tfoot th {
    background-color: #d6e9f8;
    text-align: left;
    border: 1px solid #ccc;
    font-size: 11px;
    padding: 4px;
    color: #333;
}

See this jsFiddle for demonstration.

Regarding pagination, there is Select list pagination plug-in. You need to include appropriate plug-in JS and use pagingType: "listbox" initialization option, see the example below:

$('#example').DataTable( {
    responsive: true,
    pagingType: "listbox"
} );

See this jsFiddle for demonstration.

Upvotes: 1

Related Questions