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

目录

 

一、效果图

二、分页 js 源码讲解

三、分页样式 css 源码

三、实现前后台对接


一、效果图

二、分页 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
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值