jQuery DataTables:如何更改分页活动颜色?
Posted
技术标签:
【中文标题】jQuery DataTables:如何更改分页活动颜色?【英文标题】:jQuery DataTables: how to change pagination active color? 【发布时间】:2016-12-05 04:54:20 【问题描述】:我正在使用 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>
感谢您对此的任何帮助,
【问题讨论】:
当前版本的 PHP 不应该对任何东西进行 GET 或 POST。 【参考方案1】:您需要为分页链接按钮设置样式的类:
"paginate_button" - 所有分页按钮都有这个类 "current" - 除了上面的类之外,它还标记了当前页面的按钮。因此,您可以在 datatables 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.
【讨论】:
【参考方案2】:您可以使用以下代码:
$('.paginate_button.active').css("background-color","#f00");
【讨论】:
以上是关于jQuery DataTables:如何更改分页活动颜色?的主要内容,如果未能解决你的问题,请参考以下文章
如何更改 DataTables jQuery 插件的分页按钮数量
更改datatables的分页切换时的'processing'提示信息的式样
如何在按钮单击时启用和禁用 jquery dataTables 的分页