Datatables Pagination Buttons - Remove Unwanted Space

How to remove spaces in the Datatables pagination buttons

After so many research, I found out that

while using bootstrap css, do not use jquery.dataTables.css with it. else it will create spacing issue in pagination.

Bootstrap Datatable 4 independently works good as you see in JsBin that i created.

Hope, if you point correct URL of poper.js which is as following :
else this will also create issue with bootstrap 4 css.

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

EDIT :

If you see below codepen, which has same issue that your are facing.

if you open that codepen, and remove the following line and it's work fine for you.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10-dev/css/jquery.dataTables.css">

Hope this may work for you. if not, comment down below.

Datatables pagination buttons - Remove unwanted space

This issue has already been noted in their bug database.
You do not need to hack the css.

bootstrap pagination looks bad #39

No need to include DataTables' own stylesheet (jquery.dataTables.css) since Bootstrap and the integration file provide everything that is needed.

So just delete jquery.dataTables.css, and keep dataTables.bootstrap.min.css in your html style sheets.

Pagination - Previous and Next size buttons in jQuery DataTables

You can select those two links by class

.previous, .next {
    // CSS here
}

Here's a live version to play with.

disable pagination if there is only one page in datatables

You must hide them dynamically I think, you can use fnDrawCallback()

$('#example').dataTable({
    "fnDrawCallback": function(oSettings) {
        if ($('#example tr').length < 11) {
            $('.dataTables_paginate').hide();
        }
    }
});

EDIT - another way found here could be

"fnDrawCallback":function(){
      if ( $('#example_paginate span span.paginate_button').size()) {
      $('#example_paginate')[0].style.display = "block";
     } else {
     $('#example_paginate')[0].style.display = "none";
   }
}

How to make pagination Next button not look disabled in Datatables

To remove the disabling effect you have to remove the attribute disabled at all since disabled="true" or disabled="false" are considered as disabled, you could use removeAttr():

$j('#buttonID').removeAttr('disabled');

Hope this helps.

$('#buttonID').removeAttr('disabled');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button disabled="true">Button 1</button><button disabled="false">Button 2</button><button disabled>Button 3</button>
<button id="buttonID" disabled>Button 4</button>

fullnumber pagination style in datatables to disable first and last button when on first and last page of data respectively

Well you could hide them through CSS i think.

.dataTables_paginate .ui-state-disabled {
     display:none;
}

if you provide an example on jsfiddle.net whe can help you better

Datatables pagination hide 1 2 3 page button and have Next - Previoud Button ony

You have 4 options:

simple - 'Previous' and 'Next' buttons only
simple_numbers - 'Previous' and 'Next' buttons, plus page numbers
full - 'First', 'Previous', 'Next' and 'Last' buttons
full_numbers - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers
So in your case :

 $('#pagination').DataTable( {
        "pagingType": "simple",
        "iDisplayLength": 2,
        "bFilter": false
    } );

Remove first, and last pagination from the jquery data table

Write your own javascript to hide/remove the elements.

$(".first.paginate_button, .last.paginate_button").hide();

How to give margin top in datatable pagination?

If you want to move the pagination controls down slightly, you can use the DataTables dom option to place the controls in a custom <div>. You can give that <div> a class name, and then attach a style to it.

The default dom value is:

"dom": 'lfrtip'

Each letter refers to a control (e.g. t is the table itself; p is the pagination).

We can change that default to this:

"dom": 'lfrti<"bottom-wrapper"p>'

This wraps the p in a div.

The div can then be styled however you wish - for example:

<style>
  .bottom-wrapper {
      margin-top: 0.5em;
  }
</style>

If you want both the info and pagination controls to be adjusted, then put the i inside the div also:

"dom": 'lfrt<"bottom-wrapper"ip>'

Update for the search box comment:

Looking at the dom documentation, the search box is represented by the letter f (for filtering input).

So, you put that in a <div> and give it its own class name:

"dom": 'l<"top-wrapper"f>rti<"bottom-wrapper"p>'

Now the letter f is wrapped: <"top-wrapper"f>

I suppose you want to move that up slightly, so, a style could be:

.top-wrapper {
    margin-bottom: 0.5em;
}