CODEWITHSUNDEEP
javascriptjquerypaginationdatatablesdisabled-control
Jurgen
Jurgen

Reputation: 131

How to make pagination "Next" button not look disabled in Datatables

I'm using Datatables pagination to show my records. My problem is that when I go to the end of my table using the "next" button of the table, this button becomes disable. I want this button not to look Disable. I have tried this :

$j('#buttonID').attr("disabled", "disabled");
$j('#buttonID').disable(true);
$j('#buttonID').prop('disabled', false);

but this are not working. Can anybody help me with an example?

Upvotes: 1

Views: 6180

Answers (4)

danish farhaj
danish farhaj

Reputation: 1354

You can update the CSS for disabled button in DataTable CSS like:

this is CSS for enable anchor :

.dataTables_wrapper .dataTables_paginate .paginate_button {
   box-sizing: border-box;
   display: inline-block;
   min-width: 1.5em;
   padding: 0.5em 1em;
   margin-left: 2px;
   text-align: center;
   text-decoration: none !important;
   cursor: pointer;
   color: #333 !important;
   border: 1px solid transparent;
   border-radius: 2px;
}

copy this CSS to your disable anchor CSS.

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
   cursor: default;
   color: #666 !important;
   border: 1px solid transparent;
   background: transparent;
   box-shadow: none;
}

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

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>

Upvotes: 0

Ayush Sharma
Ayush Sharma

Reputation: 2107

Use this - 

document.getElementById('buttonId').removeAttribute('disabled')

Upvotes: 0

Florian Sch&#246;ffl
Florian Sch&#246;ffl

Reputation: 499

Datatables will set the css class "disabled" on the next button when you reach the end.

To remove the class you will have to call.

$("#buttonID").removeClass("disabled")

The problem is that you can not call this once initialy, because datatables might disable the button afterwards, so the best thing would be to put this call into the callback after you have navigated in DT.

$('#myTable').dataTable( {
    "drawCallback": function( settings ) {
        $("#buttonID").removeClass("disabled")
    }
});

Something like this should work.

Upvotes: 5

Related Questions