Как сделать разбивку на страницы «Следующая» не отключена в Datatables

Question

Я использую разбиение на страницы Datatables, чтобы показать мои записи. Моя проблема в том, что когда я иду в конец моей таблицы, используя «следующую» кнопку в таблице, эта кнопка отключается. Я хочу, чтобы эта кнопка не выглядела Disable. Я попытался это:

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

, но это не работает. Может ли кто-нибудь помочь мне с примером?

Answer 1

Чтобы удалить отключающий эффект, который вы должны удалить атрибут disabled вообще, так как disabled="true" или disabled="false" считаются disabled, вы могли бы использовать removeAttr():

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

Надеюсь, это поможет.

$('#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>

Answer 2

Datatables будет устанавливать класс css «отключен» на следующей кнопке, когда вы достигнете конца.

Чтобы удалить класс, вам необходимо будет позвонить.

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

Проблема заключается в том, что вы не можете назвать это однажды initialy, потому что DataTables может отключить кнопку после этого, так что лучше всего было бы поместить этот вызов в обратный вызов после того, как вы переходите в DT.

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

Нечто подобное должно работать.

Answer 3

Используйте это -

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

Answer 4

Вы можете обновить CSS для кнопки инвалидов в DataTableCSS как:

это CSS для включения якоря:

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

копии этого CSS ваших Disable якорь 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; 
}