Bootstrap pagination-sm with DataTables

Question

I would like to have my Datatables pagination styled like the Bootstrap pagination.

So, at the moment it looks like this:

If I add

<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap.min.js"></script>

it looks like this:

And I want it to look like this:

I don't know why the additional js-file causes this distance between the buttons.

I would really appreciate any help!

Answer 1

Can you please check the below code link? Hope it will work for you. we have added jQuery , jquery.dataTable.js , and jquery.dataTables.min.css as per Data table documentation ( https://datatables.net/examples/basic_init/alt_pagination.html ).

We have applied style as per your required design and removed margin from pagination button like following.

.dataTables_wrapper .dataTables_paginate a.paginate_button {
  margin: 0px;
}

Please refer to this link: https://jsfiddle.net/yudizsolutions/360sefnL/2/

Answer 2

You might be forget to include the CSS library files. can you please check and add below CSS link into your code.

The following CSS library files are loaded for use in this example to provide the styling of the table:

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css

And please follow the given link and check the CSS tab information.

https://datatables.net/examples/styling/bootstrap4