我正在使用 jQuery DataTables 插件,并且想要更改分页的颜色。
使用 CSS,我想更改字体颜色、悬停字体颜色和事件页面颜色。
分页代码如下:
<script>
$(document).ready(function() {
$.fn.dataTable.ext.errMode = 'none';
var table = $('#users').DataTable({
"columnDefs": [
{ "visible": false, "targets": 1 }
],
"columns": [
{ "data": "user"},
{ "data": "name"}
],
"processing": true,
"serverSide": true,
"searching": true,
"paging": true,
"ajax": {
url: "get_info.php",
type: 'POST'
},
"order": [[ 2, 'asc' ]],
"lengthMenu": [
[25, 50, 100],
[25, 50, 100]
],
"iDisplayLength": 20,
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(1, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="8">'+group+'</td></tr>'
);
last = group;
}
} );
}
} );
// Order by the grouping
$('#devices tbody').on( 'click', 'tr.group', function () {
var currentOrder = table.order()[0];
if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
table.order( [ 2, 'desc' ] ).draw();
}
else {
table.order( [ 2, 'asc' ] ).draw();
}
} );
} );
</script>
<tr>
<th>user</th>
<th>name</th>
</tr>
</thead>
<tfoot>
<tr>
<th>user</th>
<th>name</th>
</tr>
</tfoot>
</table>
感谢您对此提供的任何帮助,
最佳答案
您需要为分页链接按钮设置样式的类:
- “paginate_button” - 所有分页按钮都有此类
- “current” - 除了上面的类之外,它还标记了当前页面的按钮。
因此,您可以在数据表 css 文件之后包含一个 css 文件,并进行以下覆盖:
a.paginate_button {
// override font-color here.
}
a.paginate_button:hover {
// override hover font-color here.
}
a.paginate_button.current {
// override current page button styling here.
}
关于jQuery 数据表 : how to change pagination active color?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38676324/