jQuery 响应式数据表自定义 CSS 和分页

Question

我正在使用 jQuery 和 jQuery datatables (1.10.1) 创建“响应式”数据表。我正在尝试自定义 2 件事1. 给自己的 CSS 看感觉2. 分页和搜索控件。

这是 fiddle - http://jsfiddle.net/urwyrj89/

我已经添加了我自己的 CSS 但它似乎没有接受它，因为我的 CSS 有 background-color 没有显示在用户界面上:

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

但它从不应用它。我尝试直接放置 class 以及在运行时在 jQuery 中替换。我是新手，所以会感谢一些指点吗？

另外，我想自定义分页控件。而不是默认 View ，即

我希望控件像下面一样，同时定位在顶部和底部

可以定制吗？关于如何实现它的任何指示？

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用于演示。