データシートでページ番号の「次へ」ボタンが無効に見えるようにする方法

Question

私のレコードを表示するには、Datatablesページネーションを使用しています。私の問題は、テーブルの「次へ」ボタンを使用してテーブルの最後に移動すると、このボタンが無効になることです。 このボタンを表示しないようにします。無効にします。 私はこれを試しました：

$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") 

問題は、DataTableのは、その後のボタンを無効にするかもしれないので、あなたが、一度で初期状態これを呼び出すことができないので、最善のことは、あなたがDTに移動した後にコールバックにこの呼び出しを置くことであろう。

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

何かこれはうまくいくはずです。

Answer 3

使用すると、この -

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

Answer 4

あなたのようなDataTableCSSに無効なボタン用CSSを更新することができます。これは、のために有効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アンカー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; 
}