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)?
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.
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;
}
I hope that helps! Good luck :D
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.