jQuery responsive Datatables Customize CSS and Pagination -

i using jquery , jquery datatables (1.10.1) create "responsive" datatables. trying customize 2 things 1. , feel giving own css 2. pagination , search controls.

here fiddle - http://jsfiddle.net/urwyrj89/

i have added own css not seem take because css has background-color not show 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 never applies it. tried putting class directly substituting @ run time in jquery. new this, appreciate pointers ?

also, want customize pagination control. instead of default view i.e.

i want control below , also, positioned both on top , bottom

is customization possible? pointers on how achieve ?

you have apply style using rule below or use !important 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 demonstration.

---

regarding pagination, there select list pagination plug-in. need include appropriate plug-in js , use pagingtype: "listbox" initialization option, see example below:

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

see this jsfiddle demonstration.