如何使分页 "Next" 按钮在数据表中看起来不被禁用

Question

我正在使用 Datatable 的分页来显示我的记录。我的问题是，当我使用 table 的 "next" 按钮转到 table 的末尾时，此按钮变为禁用状态。我希望这个按钮看起来不禁用。我试过这个：

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

但这不起作用。谁能帮我举个例子？

Answer 1

当您到达终点时，Datatables 将在下一个按钮上设置 css class "disabled"。

要删除 class，您必须致电。

$("#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 禁用按钮，例如：

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

如何使分页 "Next" 按钮在数据表中看起来不被禁用

How to make pagination "Next" button not look disabled in Datatables

javascript

jquery

pagination

datatables

disabled-control