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 中获取分页信息

如何在按钮单击时启用和禁用 jquery dataTables 的分页

如何在 jQuery DataTables 中的分页期间滚动到第一行

jQuery DataTables 中的下拉分页