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，您可以使用 {{ 3}} ：

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

希望这有帮助。

＆＃13;
＆＃13;
$('#buttonID').removeAttr('disabled');
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 4

您可以在CSS DataTable更新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;
}

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

4 个答案: