目录
一、效果图
二、分页 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