Jquery 分页插件，带你一步一步接入后台数据

最新推荐文章于 2025-06-23 13:04:59 发布

原创

最新推荐文章于 2025-06-23 13:04:59 发布 · 4.1k 阅读

14 ·

CC 4.0 BY-SA版权

一、效果图

二、分页 js 源码讲解

新建一个 js 文件，基本直接复制粘贴就行，记得引入到需要的页面中。

需要注意的是：

前面的构造函数，是用来初始化前端分页的，在需要实现分页的页面的 js 文件中调用这个构造函数，进行分页的初始化。

后面的 JumpToPage(pageIndex); 函数，是用来实现页面跳转的，是在需要实现分页的页面的 js 文件中去实现这个函数。

到这里如果还不知道是什么意思，或者怎么实现的，没事！！！直接往下看。

(function($, window, document) {
	// 定义构造函数
	function Paging(el, options) {
		this.el = el;
		this.options = {
			pageNo : options.initPageNo || 1, // 初始页码
			totalPages : options.totalPages || 1, // 总页数
			totalCount : options.totalCount || '', // 条目总数
			slideSpeed : options.slideSpeed || 0, // 缓动速度
			jump : options.jump || false, // 支持跳转
			callback : options.callback || function() {
			} // 回调函数
		};
		this.init();
	}
	// 给实例对象添加公共属性和方法
	Paging.prototype = {
		constructor : Paging,
		init : function() {
			this.createDom();
			this.bindEvents();
		},
		createDom : function() {
			var that = this, ulDom = '', jumpDom = '', content = '', liWidth = 60, // li的宽度
			totalPages = that.options.totalPages, // 总页数
			wrapLength = 0;
			totalPages > 5 ? wrapLength = 5 * liWidth : wrapLength = totalPages
					* liWidth;
			for (var i = 1; i <= that.options.totalPages; i++) {
				i != 1 ? ulDom += '<li>' + i + '</li>'
						: ulDom += '<li class="sel-page">' + i + '</li>';
			}
			that.options.jump ? jumpDom = '<input type="text" placeholder="1" class="jump-text" id="jumpText"><button type="button" class="jump-button" id="jumpBtn">跳转</button>'
					: jumpDom = '';
			cont