laypage 分页控件使用方法
1、官方网站
http://laypage.layui.com/
2、示例demo
/**
* 分页工具类，支持自动进行数据分页
* @param {page.totalPage} 总页数
* @param {page.totalData} 总数据量
*/
$(function(){
laypage({
cont: 'hui-page',
pages: 18, //总页数
totalData:630,//总数据量
everyPage:function(){//每页数据量
var everyPage = location.search.match(/everyPage=(\d+)/);
return everyPage ? everyPage[1] : 10;
}(),
curr: function(){ //通过url获取当前页，也可以同上（pages）方式获取
var page = location.search.match(/page=(\d+)/);
return page ? page[1] : 1;
}(),
skin: 'molv', //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00
groups: 7 ,//连续显示分页数
skip: true, //是否开启跳页
prev: '<', //若不显示，设置false即可
next: '>', //若不显示，设置false即可
jump: function(e, first){ //触发分页后的回调
if(!first){ //一定要加此判断，否则初始时会无限刷新
location.href = '?page='+e.curr+"&everyPage="+e.everyPage;
}
}
});
});
e3、改造版源码（功能增强）
/*!
@Name : layPage v1.3- 分页插件
@Author: 贤心
@Site：http://sentsin.com/layui/laypage
@License：MIT
*/
;!function(){
"use strict";
function laypage(options){
var skin = 'laypagecss';
laypage.dir = 'dir' in laypage ? laypage.dir : Page.getpath + '/skin/laypage.css';
new Page(options);
if(laypage.dir && !doc[id](skin)){
Page.use(laypage.dir, skin);
}
}
laypage.v = '1.3';
var doc = document, id = 'getElementById', tag = 'getElementsByTagName';
var index = 0, Page = function(options){
var that = this;
var conf = that.config = options || {};
conf.item = index++;
that.render(true);
};
Page.on = function(elem, even, fn){
elem.attachEvent ? elem.attachEvent('on'+ even, function(){
fn.call(elem, window.even); //for ie, this指向为当前dom元素
}) : elem.addEventListener(even, fn, false);
return Page;
};
Page.getpath = (function(){
var js = document.scripts, jsPath = js[js.length - 1].src;
return jsPath.substring(0, jsPath.lastIndexOf("/") + 1);
}())
Page.use = function(lib, id){
var link = doc.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = laypage.dir;
id && (link.id = id);
doc[tag]('head')[0].appendChild(link);
link = null;
};
//判断传入的容器类型
Page.prototype.type = function(){
var conf = this.config;
if(typeof conf.cont === 'object'){
return conf.cont.length === undefined ? 2 : 3;
}
};
//分页视图
Page.prototype.view = function(){
var that = this, conf = that.config, view = [], dict = {};
conf.pages = conf.pages|0;
conf.curr = (conf.curr|0) || 1;
conf.groups = 'groups' in conf ? (conf.groups|0) : 5;
conf.first = 'first' in conf ? conf.first : '首页';
conf.last = 'last' in conf ? conf.last : '尾页';
conf.prev = 'prev' in conf ? conf.prev : '上一页';
conf.next = 'next' in conf ? conf.next : '下一页';
if(conf.pages <= 1){
return '';
}
if(conf.groups > conf.pages){
conf.groups = conf.pages;
}
//计算当前组
dict.index = Math.ceil((conf.curr + ((conf.groups > 1 && conf.groups !== conf.pages) ? 1 : 0))/(conf.groups === 0 ? 1 : conf.groups));
//当前页非首页，则输出上一页
if(conf.curr > 1 && conf.prev){
view.push(''+ conf.prev +'');
}
//当前组非首组，则输出首页
if(dict.index > 1 && conf.first && conf.groups !== 0){
view.push(''+ conf.first +'…');
}
//输出当前页组
dict.poor = Math.floor((conf.groups-1)/2);
dict.start = dict.index > 1 ? conf.curr - dict.poor : 1;
dict.end = dict.index > 1 ? (function(){
var max = conf.curr + (conf.groups - dict.poor - 1);
return max > conf.pages ? conf.pages : max;
}()) : conf.groups;
if(dict.end - dict.start < conf.groups - 1){ //最后一组状态
dict.start = dict.end - conf.groups + 1;
}
for(; dict.start <= dict.end; dict.start++){
if(dict.start === conf.curr){
view.push(''+ dict.start +'');
} else {
view.push(''+ dict.start +'');
}
}
//总页数大于连续分页数，且当前组最大页小于总页，输出尾页
if(conf.pages > conf.groups && dict.end < conf.pages && conf.last && conf.groups !== 0){
view.push('…'+ conf.last +'');
}
//当前页不为尾页时，输出下一页
dict.flow = !conf.prev && conf.groups === 0;
if(conf.curr !== conf.pages && conf.next || dict.flow){
view.push((function(){
return (dict.flow && conf.curr === conf.pages)
? ''+ conf.next +''
: ''+ conf.next +'';
}()));
}
view.push('共'+conf.pages+'页，'+conf.totalData+'条数据 ');
var everyPage=conf.everyPage;//每页数据量
var everyPageTmp='每页'+'数据';
view.push(everyPageTmp);
return ''+ view.join('') + function(){
return conf.skip
? ''
+ ''
: '';
}() +'';
};
//跳页
Page.prototype.jump = function(elem){
if(!elem) return;
var that = this, conf = that.config, childs = elem.children;
var btn = elem[tag]('button')[0];
var input = elem[tag]('input')[0];
var select= elem[tag]('select')[0];
for(var i = 0, len = childs.length; i < len; i++){
if(childs[i].nodeName.toLowerCase() === 'a'){
Page.on(childs[i], 'click', function(){
var curr = this.getAttribute('data-page')|0;
conf.curr = curr;
that.render();
});
}
}
if(btn){
Page.on(btn, 'click', function(){
var curr = input.value.replace(/\s|\D/g, '')|0;
if(curr && curr <= conf.pages){
conf.curr = curr;
that.render();
}
});
}
if(select){
Page.on(select, 'change', function(){
var everyPage= $(select).val();
conf.everyPage = everyPage;
that.render();
});
}
};
//渲染分页
Page.prototype.render = function(load){
var that = this, conf = that.config, type = that.type();
var view = that.view();
if(type === 2){
conf.cont.innerHTML = view;
} else if(type === 3){
conf.cont.html(view);
} else {
doc[id](conf.cont).innerHTML = view;
}
conf.jump && conf.jump(conf, load);
that.jump(doc[id]('laypage_' + conf.item));
if(conf.hash && !load){
location.hash = '!'+ conf.hash +'='+ conf.curr;
}
};
//for 页面模块加载、Node.js运用、页面普通应用
"function" === typeof define ? define(function() {
return laypage;
}) : "undefined" != typeof exports ? module.exports = laypage : window.laypage = laypage;
}();