jquery dataTable pagination css

user_4931657 0
Viewed 2930

I've been searching on how to customize the pagination style but haven't found much on it.

Currently with the below jquery, the standard default pagination style is loaded on the table.

$('#id_view_student_table').DataTable({
    "pagingType": "simple_numbers",
    "language": {"paginate": {
             "previous": '<i class="fa fa-angle-left" style="color: #27c2a5"></i>',
             "next": '<i class="fa fa-angle-right" style="color: #27c2a5"></i>'
             }
     }
};

How do I interact with the pagination elements to change the style (through css or jquery)?

Update

I've added a screen capture to show the elements of the dataTables_paginate items.

Thanks to @Birdie Golden for the initial answer on how to interact with the paginate elements. Still trying to figure out how to work with hover and current elements though. enter image description here

css jquery
1 Answers

I'm not sure if this is the answer you're looking for but once you've generated the pagination you can inspect that element within the browser window and target the dynamically generated styles.

For example: DataTables outputs the class: .dataTables_wrapper (the container) and .paginate_button (the pagination element). If you wanted to say change the color of the pagination button background and remove the rounded corners you would do something like this in your stylesheet:

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 0;
    background: #ff1493;
}

DataTables Styling Pagination

I hope that helps! Good luck :D

user_24797240
Related