jQuery DataTables: Wie ändere ich die aktive Paginierung?

Question

Ich verwende das jQuery DataTables-Plugin und möchte die Farbe der Seitennummerierung ändern.

Mit CSS möchte ich sowohl Schriftfarbe, Hover-Schriftfarbe und aktive Seitenfarbe ändern.

Die Paginierung Code sieht wie folgt aus:

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

Vielen Dank für jede Hilfe bei diesem,

Answer 1

Die Klassen, die Sie für die Paginieren Linkbuttons zu Artnotwendigkeit :

• "paginate_button" - Alle Paginat-Schaltflächen haben diese Klasse
• "aktuelle" - Zusätzlich zu der oben genannten Klasse markiert dies die Schaltfläche, die für die aktuelle Seite ist.

So können Sie eine CSS-Datei nach der Datentabellen CSS-Datei mit den folgenden Überschreibungen sind:

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