Как сделать так, чтобы кнопка «Далее» разбивки на страницы не выглядела отключенной в Datatables

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

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

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


javascript pagination jquery datatables disabled-control
person Jurgen    schedule 14.02.2017    source источник
comment
Я считаю, что вам нужно удалить отключенный атрибут, а не просто изменить его значение   -  person Dark Hippo    schedule 14.02.2017
comment
Так что стилизуйте его, чтобы он выглядел так, как вы предпочитаете.   -  person dfsq    schedule 14.02.2017
comment
Странный запрос. Отключение кнопки делает очевидным для ваших пользователей, что они достигли конца набора результатов. Почему бы вам не хотеть этого?   -  person Rory McCrossan    schedule 14.02.2017

Ответы (4)


arrow_upward
0
arrow_downward

Чтобы удалить эффект отключения, вы должны вообще удалить атрибут 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>

person Zakaria Acharki    schedule 14.02.2017

arrow_upward
4
arrow_downward

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

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

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

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

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

Что-то вроде этого должно работать.

person Florian Schöffl    schedule 14.02.2017

arrow_upward
0
arrow_downward

Использовать это -

document.getElementById('buttonId').removeAttribute('disabled')
person Ayush Sharma    schedule 14.02.2017

arrow_upward
0
arrow_downward

Вы можете обновить кнопку 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;
}
person danish farhaj    schedule 14.02.2017