CODEWITHSUNDEEP
jquerydatatablepaginationdatatables
georgetovrea
georgetovrea

Reputation: 577

jQuery DataTables: how to change pagination active color?

I am using the jQuery DataTables plugin and would like to change the color of the pagination.

With CSS I would like to change both font color 、hover font color and active page color .

The pagination code looks as follows:

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

Thanks for any help with this,

Upvotes: 4

Views: 11477

Answers (2)

RainyTears
RainyTears

Reputation: 189

you can use below code:

$('.paginate_button.active').css("background-color","#f00");

Upvotes: 0

Adrian
Adrian

Reputation: 2923

The classes you need to style for the paginate link buttons:

  • "paginate_button" - All paginate buttons have this class
  • "current" - In addition to the class above this marks the button that is for the current page.

So you can include a css file after the datatables css file with the following overrides:

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

Upvotes: 2

Related Questions