Как реализовать разбиение на таблицы с помощью кнопок «предыдущий» и «следующий» с помощью jQuery и Bootstrap?

Question

Я создал таблицу начальной загрузки с 79 строками.Я показываю только 10 строк за раз и отдых в виде нумерации страниц.Я могу создать нумерацию страниц.Как реализовать предыдущую и следующую кнопку, а также отключить ее, если не осталось страниц для отображения?

JS fiddle link: https://jsfiddle.net/tb74dqex/1/

Answer 1

Вы можете добавить слушателя .on('click') на кнопки, см. Ниже:

function activePage() { // helps us get the current active page
    var $el = $('[data-page].active');

  if($el.length) {
    return $el.data('page');
  }

  return false;
}

$(function() {
  $('.prev-btn, .next-btn').on('click', function(e) { // watch for click events
    e.preventDefault();
    e.stopPropagation(); // prevent the parent elements event from firing

    // If the clicked element has "prev-btn" class, -1 else +1 to current page
    var page = activePage() + ($(event.target).hasClass('prev-btn') ? -1 : 1);

    // Find the data-page that matches and simulate a click
    $('[data-page="' + page + '"]').trigger('click');
  });
})

См. Скрипту для рабочего примера: https://jsfiddle.net/8bg4dxes/

Приведенное выше решение дополняет существующий код без необходимости переписывать все.

Стоит отметить, что вы не можете добавить атрибут disabled к тегам a, подобным этому:

<a href="#" disabled>Link</a>

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

Answer 2

Вы можете установить для свойства disabled значение page-item через файл JavaScript.

Что-то вроде:

$("#page-item-id").addClass("disabled");