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 bees 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?

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 bees 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?

• javascript
• jquery
• pagination
• datatables
• disabled-control

Share Improve this question Follow edited Feb 15, 2017 at 10:19 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Feb 14, 2017 at 11:38 JurgenJurgen 13111 gold badge22 silver badges66 bronze badges 3

• 3 I believe you need to remove the disabled attribute, not just change it's value – Dark Hippo Commented Feb 14, 2017 at 11:39
• So style it to look whatever you prefer. – dfsq Commented Feb 14, 2017 at 11:44
• Odd request. By disabling the button it makes it obvious to your users they've reached the end of the result set. Why would you not want that? – Rory McCrossan Commented Feb 14, 2017 at 11:47

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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.

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./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>

Use this -

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

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;
}