如何在Datatables中使分页“Next”按钮看起来不被禁用

Question

我正在使用Datatables分页来显示我的记录。 我的问题是，当我使用表格的“下一步”按钮到达表格的末尾时，此按钮将变为禁用状态。 我想这个按钮不要看禁用。 我试过这个：

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

但这不起作用。 有人可以帮我举个例子吗？

Answer 1

到达结尾时，数据表将在下一个按钮上设置css类“禁用”。

要删除课程，您必须致电。

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

问题是你不能一次调用它，因为数据表可能会在之后禁用按钮，所以最好的办法就是在你在DT中导航后将这个调用放入回调中。

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

这样的事情应该有效。

Answer 2

用这个 -

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

Answer 3

要删除禁用效果，你必须删除属性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 4

您可以在DataTable CSS更新CSS for disabled按钮，如：

这是启用锚点的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;
}