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;  
	        }  
	    }  
    });  
});
e

3、改造版源码（功能增强）

/*!
 
 @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='每页'+'';
    for(var i=1;i<11;i++){
        if(i==everyPage/10){
        	 everyPageTmp +=''+i+'0条';
        }else{
        	 everyPageTmp +=''+i+'0条';
        }
    }
    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;

}();