使用tablesorter分页功能出现tablesorterPager is not a function报错

开发者阿泽

2026-9-29

解决方案

1. 修复JS引入顺序与重复引入问题

报错tablesorterPager is not a function的核心诱因是JS文件加载逻辑错误：

必须先加载tablesorter核心库，再加载pager分页插件，你当前先引入了pager插件，再引入核心库，导致pager方法没有正确挂载到tablesorter对象上
重复引入了3次tablesorter核心库（2次本地、1次CDN），后续加载的核心库会覆盖之前已经挂载了pager方法的实例，直接导致pager方法丢失
修正后的head部分JS引入代码如下：

<head>
 <script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
  <!-- 先引入tablesorter核心库，仅保留1份即可，这里保留CDN版本也可换成你本地的版本 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js" integrity="sha512-qzgd5cYSZcosqpzpn7zF2ZId8f/8CHmFKZ8j7mU4OUXTNRd5g+ZHBPsgKEwoqxCtdQvExE5LprwwPAgoicguNg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!-- 核心库加载完成后再引入pager插件 -->
  <script  src="/js/jquery.tablesorter.pager.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
  <script type="text/javascript">
  // 此处放置修正后的初始化代码
  </script>
</head>

2. 修正tablesorter初始化配置语法错误

你当前的tablesorter配置存在语法错误，widthFixed参数被写在了配置对象外部，会导致初始化失败进而影响方法链调用，修正后的初始化代码如下：

$(function() {
  $("#myTable")
  .tablesorter({
    theme : "bootstrap",
    sortList: [[0, 0]],
    widthFixed: true // 放在配置对象内部
  })
  .tablesorterPager({
    size: 2,
    container: $("#myContainer")
  });
});