JavaScript项目中pagination.js运行异常 报错$(...).pagination is not a function

该报错的核心是pagination插件未成功挂载到你调用时使用的jQuery实例上，按照以下优先级排查即可解决：

1. 修正自定义JS文件引入顺序 #

你的业务JS文件teachers.js必须放在jQuery、pagination.js的引入语句之后，正确的资源加载顺序如下：

<!-- 第一步引入jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<!-- 第二步引入依赖jQuery的pagination插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.0.7/pagination.js"></script>
<!-- 第三步引入其他依赖jQuery的插件 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js"></script>
<!-- 最后一步引入你的自定义业务JS -->
<script src="teachers.js"></script>

如果teachers.js放在pagination的引入语句之前，浏览器执行你的代码时插件还未加载，就会触发该报错。

2. 排查重复引入jQuery的问题 #

检查全页代码是否存在多次引入jQuery的情况：如果在pagination前引入了一次jQuery，后续又引入了其他版本的jQuery，新引入的jQuery会覆盖全局$对象，之前挂载在旧jQuery实例上的pagination方法会直接丢失。
解决方法：确保整个页面只引入一次jQuery，且放在所有依赖jQuery的插件之前。

3. 检查pagination.js加载状态 #

打开浏览器控制台的「网络」面板，刷新页面查看pagination.js的请求状态：

• 如果请求返回404/超时，将资源替换为本地下载的pagination.js文件引入即可
• 如果请求成功，在控制台输入$.fn.pagination回车，若返回值为undefined说明插件未正确挂载，大概率是jQuery符号冲突导致

4. 解决jQuery符号冲突 #

如果页面同时引入了其他使用$符号的JS库，将初始化代码用闭包包裹，锁定jQuery实例：

jQuery(document).ready(function($) {
    $('.pagination-container').pagination({
        dataSource: [1, 2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5, 6, 7, 100],
        callback: function(data, pagination) {
            let html = template(data);
            $('.data-container').html(html);
        }
    });
});

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