jquery分页插件调用报错的问题：$(.).pagination is not a function

人心 2019-06-27

问题描述：
分页插件jquery.pagination.js第一次初始化时分页可用，后续再调用分页则报错$(.).pagination is not a function的问题。
注意：在调用基于jQuery扩展的插件时，不能重复引用jQuery。
例如：首先引入jQuery-1.js，然后引入基于jQuery的插件(jquery.pagination.js)，然后再次引入了jQuery-2.js文件。这样的做法就是不正确的。
因为此时基于jQuery的插件(jquery.pagination.js)中的函数其实是扩展在第一次引入的jQuery-1.js对象上的，而在第二次引入的jQuery-2.js文件加载完成之后会覆盖jQuery-1.js，后续调用的jQuery方法其实都是第二次引入的jQuery-2.js文件中的方法，此时的jQuery对象上没有插件的扩展方法。

以下代码详细讲解了整个js的执行过程：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.js"></script>
<script src="jquery.pagination.js"></script>
</head>
<body>
    <div id="page1"></div>
    <div id="page2"></div>
    <div id="page3"></div>
    <button type="button" id="btn"></button>
    
    <script>
    var page1 = $('#page1');//jquery-1对象
    $('#page2').pagination();//能正确调用
    
    console.log($.fn.jquery);//jquery-1的版本号
    console.log($.fn.pagination);//pagination扩展函数
    
    $('#btn').click(function(){
        console.log($.fn.jquery);//jquery-2的版本号
        console.log($.fn.pagination);//undefined
        
        page1.pagination();//能正确调用。 $.fn.pagination扩展在了jquery-1上
        $('#page3').pagination();//报错。jquery-2已覆盖jquery-1，此时调用的是jquery-2上的方法得到jquery-2对象
    });
</script>
    <script src="jquery-2.js"></script>
</body>
</html>

总结：在调用基于jQuery扩展的插件时，注意不要重复引用jQuery。

人心

人心

相关推荐

0010 Django工程配置（07 REST_FRAMEWORK配置）

　　DRF有丰富的功能，JWT认证、过滤、分页、异常处理、接口文档、限流、缓存等。　　这些配置，有些需要写自定义接口，有些只需要配置就可以了。# 也可通过自定义Pagination类，来为视图添加不同分页行为。在视图中通过pagination_clas属性

时光如瑾雨微凉 / 0评论 2020-03-04

CodeIgniter框架多条件搜索查询分页功能解决方案

最近在用ci框架写功能的时候，需要用到分页功能，本来寻常的数据结果分页是比较简单的，但是这次写的功能是多条件搜索查询分页，就有点难度了，看官方手册下面评论好多人问，$current_page = intval; //获取当前分页页码数。$data[‘all

amberom / 0评论 2020-01-06

Yii框架分页技术实例分析

本文实例讲述了Yii框架分页技术。分享给大家供大家参考，具体如下：。$data = Field::find(); //Field为model层,在控制器刚开始use了field这个model,这儿可以直接写Field,开头大小写都可以,为了规范,我写的是大

luadenis0 / 0评论 2019-08-30

Django REST framework 分页的实现代码

Django REST framework 有内置 Pagination 模块，无需额外安装, 只需做简单的配置.就是告诉Django要用到什么样的分页样式, 比如: 返回哪些字段, 每页的大小, 请求参数的名称等等.途径1是为所有继承ListViewAP

Lius / 0评论 2019-06-19

jQuery pagination分页示例详解

async:false, ////作用是防止在ajax成功调用之前就调用$.pagination,这个时候数据个数还没有初始化

zhanggang / 0评论 2018-10-23

jquery分页插件pagination使用教程

pagination使用起来非常的方便。回调函数带参数：page_index，此值插件自动传入。

YUYISHARE / 0评论 2018-10-23

jQuery Pagination分页插件

此jQuery插件为Ajax分页插件，一次性加载，故分页切换时无刷新与延迟，如果数据量较大不建议用此方法，因为加载会比较慢。原插件CSS不太合理，使用浮动，故无法方便实现左右方向的定位，且未清除浮动，在中文修改版中我对其进行了优化，使其支持text-ali

82473264 / 0评论 2015-05-12

bootstrap 分页学习笔记

<nav><ul class="pagination pagination-sm">...</ul></nav>自己写的一个分页demo. .pagination > li,.pag

zh000 / 0评论 2015-07-22

如何在flask实现form搜索

也是很巧合,群里回答一位群友问题,便稍微回了一句然后他没搞出来,就私聊了。。好人做到底嘛。。。。就开始搞,本来以为很简单,然后没想到.....问题就是通过form的方式传一个参数到数据库查询查询很简单,主要是要分页,一开始他代码很乱我稍微整理了下。对于这个

OpsDevOps / 0评论 2019-06-25

Jekyll With Usefule Plugins

Jekyll 有很多有用的插件，比如分页，SEO优化等，另外Jekyll中可以使用一些Liquid没有定义的filter，可以让我们的站点更加好用。{{ site.posts | sort: 'author' }}TagsJekyll支持额外的标签。inc

88304694 / 0评论 2019-06-25

gulp打包amd工程

require;脚本文件：var concat = require, // 合并js. amdOptimize = require, // 处理amd依赖。.pipe; // 把检测结果输出到console.

SeekerTime / 0评论 2019-06-21

jQuery插件pagination参数使用说明 （转）

本周用了很多时间在这上面，终于搞出来了一个中文的。第一个数122指总共的条数，从{}开始是pagination自定义的一些参数。Callback：当点击链接的时候此函数被调用，此函数接受两个参数，新一页的id和pagination容器。如果回调函数返回fa

yyzhu / 0评论 2012-03-18

Bootstrap 分页

下表列出了 Bootstrap 提供的处理分页的 class。Class描述示例代码.pagination添加该 class 来在页面上显示分页。&lt;ul class="pagination"&gt;.disable

DHCliaozheng / 0评论 2017-03-12

bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能

新项目，准备引用bootstrap-table这个控件来展示页面上的表格，无奈这款控件的分页工具栏没有跳转到xx页的功能，为了适应公司美工的蛋疼需求，硬着头皮改了一下bootstrap-table的源码，实现了此功能。各路神仙如果有更完美的解决方案，也请留

spb / 0评论 2017-12-28

jquery pagination插件动态分页实例(Bootstrap分页)

<!DOCTYPE html>. <!<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />. <

程序员哦 / 0评论 2016-12-23

Bootstrap和Java分页实例第一篇

bootstrap是前端很流行的框架，正在开发的项目，用bootstrap搭建起来的页面，自我感觉很完美，终于告别了苍白无力的白花花的难看的……现在遇到了bootstrap的分页与Java后台结合起来的分页封装问题，对于我这个Java菜鸟来说，包装分页还没

Chinahdy / 0评论 2016-12-23

Bootstrap CSS组件之分页(pagination)和翻页(pager)

几乎所有网站内容都需要分页显示,一个用户体验良好的分页组件会得到访问用户的良好评价。

gigizhui / 0评论 2016-12-17

Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能

2017年底了，总结了这一年多来的前端之路，Vue从入门到放弃，再二进宫，从 Vue1.0 持续跟踪到 Vue2.5。结合公司的一些实际项目，也封装了一些比较实用的组件。由于现在公司管理平台主要运用Element UI，索性就结合组件Table 和 Pag

Wmeng0 / 0评论 2018-01-26

Ionic如何实现下拉刷新与上拉加载功能

IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为

genglang / 0评论 2016-06-03

利用AJAX实现WordPress中的文章列表及评论的分页功能

文章列表页分页一.加载 jQuery 库既然是 jQuery 驱动的 Ajax ，加载 jQuery 库是必须的。二.文章列表格式在你的文章列表页面需要确保有以下类似的结构。-- 包含所有文章的容器 -->. </div>三.加入默认导航

CXPOwen / 0评论 2016-05-17

jQuery Pagination分页插件_动力节点Java学院整理

此jQuery插件为Ajax分页插件，一次性加载，故分页切换时无刷新与延迟，如果数据量较大不建议用此方法，因为加载会比较慢。原插件CSS不太合理，使用浮动，故无法方便实现左右方向的定位，且未清除浮动，在中文修改版中我对其进行了优化，使其支持text-ali

刘阿飞 / 0评论 2019-05-05

解决JS组件bootstrap table分页实现过程中遇到的问题

问题1 ：服务器端取不到form值，querystring没有问题，但是request.form取不到值。1可以用读流文件解决。2 如果想用request.form 方式，设置 contentType: "application/x-www-fo

DJPLH / 0评论 2016-04-21

简述JavaScript提交表单的方式 （Using JavaScript Submit Form）

最近做项目遇到用Javascript提交表单的问题， 之前也做过几次， 但是不够全面， 这次总结出了几种用JavaScript提交表单的方式， 并且对此作出了比较， 选出了一种最适合此项目的方式。我目前正在为Sun Communication Suite做

yejinfu / 0评论 2016-03-18

jQuery Pagination分页插件使用方法详解

}, //PageCallback() 为翻页调用次函数。#endregion更多精彩内容请点击：jquery分页功能汇总进行学习。

xxh / 0评论 2017-02-28

jQuery分页插件jquery.pagination.js使用方法解析

jQuery的多数插件使用都比较简单，都能查找出相关api，且含有demo；--分页div，使用时，只需此部分即可-->. first_text: "<i class='begin_page'>首页</i>"

80473064 / 0评论 2017-02-09

jquery pagination分页插件使用详解（后台struts2）

页面是用的纯css的效果，没有使用bootstrap的框架，不然自带的分页是挺好用的，就不用麻烦了这边使用了jquery pagination分页插件来实现这个功能的，这边后台用的是struts2的框架，ssh的，jquery返回json数据，然后循环拼接

88491874 / 0评论 2017-01-22

jQuery命名空间与闭包用法示例

本文实例讲述了jQuery命名空间与闭包用法。分享给大家供大家参考，具体如下：

宇智波鼬 / 0评论 2017-01-12

python flask实现分页效果

在我们学习的过程中会遇到这么样的问题，就是在我们学习的过程中会发现需要分页处理，这里呢，给大家介绍书上说的分页。那么我们需要用一个单独页面取保存我们分页相关的，。

houzeyu / 0评论 2017-06-27

Django自定义分页与bootstrap分页结合

django中有自带的分页模块Paginator,想Paginator提供对象的列表，就可以提供每一页上对象的方法。这里的话不讲解Paginator,而是自定义一个分页类来完成需求：。"""用于Model字段值的选择"

DHCliaozheng / 0评论 2017-05-08

Ajax分页插件Pagination从前台jQuery到后端java总结

困惑了我一段时间的网页分页，今天特地整理了一下我完成不久的项目。下面我要分享下我这个项目的分页代码，前后端通吃。希望前辈多多指教。下面我先上网页前台和管理端的部分分页效果图，他们用的是一套代码。此jQuery插件为Ajax分页插件，一次性加载，故分页切换时

88324259 / 0评论 2016-07-22

jQuery EasyUI基础教程之EasyUI常用组件(推荐)

本文主要内容是介绍EasyUI的一些常用组件的使用，都是一些非常基础的知识，适合入门者学习，主要包括Base（基础）、Layout(布局）、菜单和按钮、表单、窗口、表格和树等的使用。要求完全掌握这些内容，学会查阅文档，了解开发基本思想。EasyUI是一种第

许学德 / 0评论 2016-07-15

jQuery插件pagination实现无刷新分页

首先，我们引入jQuery文件、jQuery pagination文件和jQuery Templates文件。</script>下边就需要取得我们所需要的数据了，如果你看过前两篇jQuery Templates的文章，你就会意识到我们需要返回j

maoye / 0评论 2019-04-26

jQuery EasyUI Pagination实现分页的常用方法

EasyUI 的 datagrid 支持服务器端分页，但是官方的资料比较少，以下总结了两种 datagrid 的服务器端分页机制，可根据情况具体使用。});如果企图通过其它的 JS 方法来调用 .datagrid 方法，则不会得到正确的分页结果。可以看到，

yangyalun / 0评论 2016-05-21

jquery分页插件jquery.pagination.js实现无刷新分页

callback: PageCallback, //PageCallback() 为翻页调用次函数。$.remove(); //移除Id为Result的表格里的行，从第二行开始。<td width="200" align=&qu

87413460 / 0评论 2016-04-01

jquery插件pagination实现无刷新ajax分页

* This jQuery plugin displays pagination links inside the selected elements.* @param {int} maxentries Number of entries to pagin

zhaoxinglei00 / 0评论 2019-04-22

Jquery 分页插件之Jquery Pagination

有同学问道jquery的简单分页插件，原来有同事写过一个简单[Javascript 使用回调函数的自定义分页插件--自带样式]。今天分享一个功能比较强大的jquery分页插件：jquery.pagination。此Jquery插件为Ajax分页插件，一次性

前端档案 / 0评论 2019-04-22

jQuery插件pagination实现分页特效

以上所述就是本文的全部内容了，希望大家能够喜欢。

83991231 / 0评论 2019-04-20

jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例

本文实例讲述了jQuery实现仿淘宝带有指示条的图片转动切换效果的方法。分享给大家供大家参考。<div class="slides_container"> <a href="#" target=&q

zhaoxinglei00 / 0评论 2015-03-04

jQuery EasyUI datagrid实现本地分页的方法

本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。一般分页都是后台做，前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。这里重点用到了pagination的监听，以及JS数组的slice方法来完成

84533871 / 0评论 2015-02-13

jQuery插件分享之分页插件jqPagination

page_string : '当前第{current_page}页,共{max_page}页',//回发事件。。。

84261948 / 0评论 2014-06-06

jQuery 插件-使用jQuery Pagination实现无刷新分页

今天，我们主要看看简单的使用jQuery pagination这个插件来实现无刷新分页，使用jQuery pagination主要作用在于分页样式的显示，而无刷新的主要原理还是使用Ajax。下边我们一步一步看看使用jQuery、JSON、Ajax和微 软

Lambo / 0评论 2013-12-02

thinkphp分页实现效果

对于thinkphp分页的实现效果，一共分为两种一种是一种调用公共函数中的函数方法，而另一种是模型中书写分页的方法，下面就给需要的朋友来整理一下。$count = $m->where->count();//连惯操作后会对join等操作进行重置。

duringnone / 0评论 2016-10-13

Yii2分页的使用及其扩展方法详解

第一步，我们来看看yii2自带的分页类该如何去使用？])代码基本上可以完全拷贝，修改部分数据即可，相信大多数人都是看得懂的。>如果你不想要显示上下页，可以将prevPageLabel和nextPageLabel设置为false. >默认显示的页

xiaoxingyun / 0评论 2016-05-23

CodeIgniter分页类pagination使用方法示例

本文实例讲述了CodeIgniter分页类pagination使用方法。分享给大家供大家参考，具体如下：。$current_page = intval; //获取当前分页页码数。$offset = * $config['per_page']; //

phptyong / 0评论 2016-03-28

jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版

原插件CSS不太合理，使用浮动，故无法方便实现左右方向的定位，且未清除浮动，在中文修改版中我对其进行了优化，使其支持text-align的定位。对原js文件注释进行了中文翻译，demo页面也是汉化了的，demo页面的js与原demo有一些出入，但核心不变。

melissahexiu / 0评论 2013-01-11

jQuery EasyUI API 中文文档 - Pagination分页

<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> 代码如下：。记录总数，应该在创建pagination

舜岳 / 0评论 2011-09-28

jquery模拟按下回车实现代码

众所周知easyui 的Pagination中要想跳转到某一页，只需要输入页码按ENTER就能达到效果。前段时间的项目 客户提出要求说想要输入页码 按一个GO的按钮做跳转。好吧，客户是上帝，他们怎么说我们这些程序猿只能尽自己所能来达到效果。<inpu

84533871 / 0评论 2011-09-20

一款Jquery 分页插件的改造方法（服务器端分页）

简单实现功能肯定很简单，但是要做到好用，通用，性能好，易于修改也不是一个很简单的事情，所以各种JS分页控件大显身手，如jquery pager、jquery Pagination等等，调用很方便，生成效果也很好，唯一缺点就是都是内存分页，数据量少点还好，如

草莓酱 / 0评论 2011-07-11

asp.net jquery无刷新分页插件(jquery.pagination.js)

$.remove(); //移除Id为Result的表格里的行，从第二行开始

zhangyang0 / 0评论 2013-01-10