解决jQuery simplePagination.js在Bootstrap标签页Tab2的分页失效问题

标签页1 #

标签页2 #

问题描述 #

使用jQuery simplePagination.js实现分页功能，标签页1可正常每页显示1条数据，但标签页2却将所有数据显示在1页中（本应分为2页）。

页面初始化时，标签页2处于隐藏状态（tab-pane fade类，未添加active），使用:visible选择器获取#tab2 tbody tr会返回空集合：

• numItems被赋值为0，导致分页组件初始化时items: 0，无法生成正确的分页按钮
• items.slice(perPage).hide()无任何效果，所有行保持显示状态

当切换到标签页2时，所有行直接显示，分页组件未正确工作。

移除:visible选择器，直接获取标签页下的所有表格行（不管标签页是否可见），同时监听标签页切换事件，确保切换后分页状态正常：

1. 将$("#tab1 tbody tr:visible")改为$("#tab1 tbody tr")
2. 将$("#tab2 tbody tr:visible")改为$("#tab2 tbody tr")
3. 添加标签页切换监听，切换时重置对应分页的当前页

JavaScript #

updateNumItem();

// 监听标签页切换，确保分页状态正确
$('#tab a').on('shown.bs.tab', function (e) {
  const targetTab = $(e.target).attr('href');
  if(targetTab === '#tab1'){
    $('#pagination-container').pagination('selectPage', 1);
  } else if(targetTab === '#tab2'){
    $('#pagination-container1').pagination('selectPage', 1);
  }
});

function updateNumItem() {
  const perPage = 1;
  
  // 处理标签页1
  const item = $("#tab1 tbody tr");
  const numItem = item.length;
  item.slice(perPage).hide();

  $('#pagination-container').pagination({
    items: numItem,
    itemsOnPage: perPage,
    prevText: "«",
    nextText: "»",
    onPageClick: function(pageNumber) {
      const showFrom = perPage * (pageNumber - 1);
      const showTo = showFrom + perPage;
      item.hide().slice(showFrom, showTo).show();
    }
  });

  // 处理标签页2
  const items = $("#tab2 tbody tr");
  const numItems = items.length;
  items.slice(perPage).hide();

  $('#pagination-container1').pagination({
    items: numItems,
    itemsOnPage: perPage,
    prevText: "«",
    nextText: "»",
    onPageClick: function(pageNumber) {
      const showFrom = perPage * (pageNumber - 1);
      const showTo = showFrom + perPage;
      items.hide().slice(showFrom, showTo).show();
    }
  });
}

HTML（保持原代码不变） #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplePagination.js/1.4/simplePagination.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplePagination.js/1.4/jquery.simplePagination.js"></script>

<div class="container">
    <ul class="nav nav-tabs" id="tab">
        <li class="nav-item active">
            <a href="#tab1" class="nav-link" data-toggle="tab">TAB1</a>
        </li>
        <li class="nav-item">
            <a href="#tab2" class="nav-link" data-toggle="tab">TAB2</a>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active py-3" id="tab1">
            <table class="table table-striped" id="data1" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Month</th>
                        <th>Year</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Alice Jay</td>
                        <td>January</td>
                        <td>2023</td>
                    </tr>
                    <tr>
                        <td>Park Jay</td>
                        <td>December</td>
                        <td>2023</td>
                    </tr>
                    <tr>
                        <td>Janey Yu</td>
                        <td>March</td>
                        <td>2022</td>
                    </tr>
                    <tr>
                        <td>Alex Lee</td>
                        <td>April</td>
                        <td>2021</td>
                    </tr>
                    <tr>
                        <td>Karl Peter</td>
                        <td>March</td>
                        <td>2021</td>
                    </tr>
                    <tr>
                        <td>Herry Harry</td>
                        <td>January</td>
                        <td>2020</td>
                    </tr>
                    <tr>
                        <td>Wendy Lee</td>
                        <td>January</td>
                        <td>2023</td>
                    </tr>
                    <tr>
                        <td>Rayan Otto</td>
                        <td>January</td>
                        <td>2023</td>
                    </tr>
                    <tr>
                        <td>Ellie Billie</td>
                        <td>January</td>
                        <td>2023</td>
                    </tr>
                    <tr>
                        <td>George Laire</td>
                        <td>January</td>
                        <td>2023</td>
                    </tr>
                    <tr>
                        <td>Tammy Tom</td>
                        <td>August</td>
                        <td>2021</td>
                    </tr>
                    <tr>
                        <td>John Johnny</td>
                        <td>July</td>
                        <td>2021</td>
                    </tr>
                    <tr>
                        <td>Kenny Daniel</td>
                        <td>June</td>
                        <td>2021</td>
                    </tr>
                    <tr>
                        <td>Leon Frank</td>
                        <td>December</td>
                        <td>2022</td>
                    </tr>
                    <tr>
                        <td>Sam Henry</td>
                        <td>February</td>
                        <td>2022</td>
                    </tr>
                </tbody>
            </table>
            <div id="pagination-container"></div>
        </div>
        <div class="tab-pane fade py-3" id="tab2">
            <table class="table table-striped" id="data2" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Month</th>
                        <th>Year</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Jay</td>
                        <td>January</td>
                        <td>2023</td>
                    </tr>
                    <tr>
                        <td>Park</td>
                        <td>December</td>
                        <td>2023</td>
                    </tr>
                </tbody>
            </table>
            <div id="pagination-container1"></div>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者newbies