Search code examples
cssdatatablepagination

Datatables pagination CSS formatting

I am using datatables from https://datatables.net/

Codepen - https://codepen.io/raj2619/pen/eYyEjEE

I've used the following CSS to highlight the items clicked in the pagination bar

        #example_paginate {
        color:rgba(255, 110, 0, 0.8);
        font-size:19px;
        font-family:"Trebuchet MS";
        }   
        .page-item.active .page-link {
        color: #fff !important;
        background: green;              
        background-color: #000 !important;
        }
        .page-link {
        color: #000 !important;
        background-color: #fff !important;
        border: 1px solid #dee2e6 !important; 
        }
        .page-link:hover {
        color: #fff !important;
        background-color: #000 !important;
        border-color: #000 !important; 
        }

However, this doesn't highlight the entire background of the clicked page number. It just highlights the number. What tweaks do I need to highlight thee entire background of the clicked page number?

Currently it looks as below -

enter image description here

I'm wanting to make it look something like below.

enter image description here

I'm by no measure a CSS expert. I would appreciate nay help here please.

Solution

  • To gain round buttons you can add this rule to your CSS (you can tweak the padding to get exactly the desired result):

    .dataTables_wrapper .dataTables_paginate .paginate_button {
   border-radius: 50% !important;
   padding: 0.5em 0.9em !important;
}