Question

我创建了具有79行的引导表。我一次只显示10行，以分页的形式休息。我能够创建分页。如果没有页面可显示，如何实现上一个和下一个按钮并将其禁用？

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

Answer 1

您可以通过JavaScript文件将disabled属性设置为page-item。

类似的东西：

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

Answer 2

您可以在按钮本身上添加.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>

如果没有文本页面，上面提供的解决方案将完全不执行任何操作。

如何使用jQuery和Bootstrap使用上一个和下一个按钮实现表分页？

2 个答案: