使用breedjs实现HTML表格分页失败，求助错误原因及更简便方案

现有代码的错误点 #

• 未引入breedjs：你已经将breedjs.min.js放到Scripts文件夹，但代码中没有添加对应的script引入标签，浏览器没有加载该库，无法调用breed相关方法。需要在jQuery引入之后添加 <script src="Scripts/breedjs.min.js"></script>
• JS语法与执行逻辑错误：你定义的breed初始化匿名函数没有绑定执行时机，末尾还多了多余的右括号，导致代码根本没有运行。需要将初始化逻辑放在DOM加载完成的回调中，确保依赖和DOM节点都加载完毕再执行。
• 入参不匹配：breed.run的input参数直接传入对应数组即可，不需要包裹外层的data对象。

修正后的breedjs实现核心代码 #

<script src="Scripts/jquery-3.3.1.js"></script>
<script src="Scripts/bootstrap.bundle.js"></script>
<!-- 新增breedjs引入 -->
<script src="Scripts/breedjs.min.js"></script>
<script>
var data = { 
  people: [
    { age: 21, name: "Wells Ferrell", gender: "male", email: "wellsferrell@limozen.com" },
    { age: 22, name: "Burton Pena", gender: "male", email: "burtonpena@limozen.com" },
    { age: 22, name: "Buchanan Nelson", gender: "male", email: "buchanannelson@limozen.com" },
    { age: 27, name: "Marshall Armstrong", gender: "male", email: "marshallarmstrong@limozen.com" },
    { age: 21, name: "Sofia Dixon", gender: "female", email: "sofiadixon@limozen.com" },
    { age: 38, name: "Kent Mason", gender: "male", email: "kentmason@limozen.com" },
    { age: 21, name: "Cummings Rodgers", gender: "male", email: "cummingsrodgers@limozen.com" },
    { age: 27, name: "Lorrie Haynes", gender: "female", email: "lorriehaynes@limozen.com" }
  ] 
};
// DOM加载完成后执行初始化
$(function () {
  breed.run({
    scope: 'people',
    input: data.people,
    runEnd: function () {
      for (let i = 1; i <= breed.getPageCount('people'); i++) {
        $('ul').append(
          $('<li>', {
            html: i,
            onclick: "breed.paginate({scope: 'people', page: " + i + "});"
          })
        );
      }
    }
  });
});
</script>

更轻量的无额外依赖实现方案 #

如果你不想引入不熟悉的第三方库，用你已经加载的jQuery手写分页逻辑更简单，后续维护也更方便：

const pageSize = 5; // 每页显示条数
let currentPage = 1; // 当前页码
const peopleData = [/* 上面的人员数据数组 */];

// 渲染表格内容
function renderTable() {
  // 计算当前页需要展示的数据区间
  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  const currentPageData = peopleData.slice(startIndex, endIndex);
  // 清空原有表格内容
  $('tbody').empty();
  // 渲染当前页数据
  currentPageData.forEach(item => {
    const row = `<tr>
      <td>${item.name}</td>
      <td>${item.gender}</td>
      <td>${item.age}</td>
      <td>${item.email}</td>
    </tr>`;
    $('tbody').append(row);
  });
  // 渲染分页按钮
  renderPagination();
}

// 渲染分页按钮
function renderPagination() {
  const totalPage = Math.ceil(peopleData.length / pageSize);
  $('ul').empty();
  for (let i = 1; i <= totalPage; i++) {
    const pageBtn = `<li onclick="currentPage = ${i}; renderTable();">${i}</li>`;
    $('ul').append(pageBtn);
  }
}

// 页面加载完成后初始化渲染
$(function () {
  renderTable();
});

使用这个方案不需要保留tr上的b-scope、b-loop、b-paginate这些自定义属性，直接用原生tr结构即可。

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