jQuery responsive Datatables Customize CSS and Pagination

Question

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.

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

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

Answer 1

您必须使用以下规则应用您的风格或使用!important，这是不太可取的。

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;
}

请参阅this jsFiddle进行演示。

关于分页，有Select list分页插件。您需要包含适当的插件JS并使用pagingType: "listbox"初始化选项，请参阅以下示例：

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

请参阅this jsFiddle进行演示。