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('<a href="javascript:;" class="laypage_prev" data-page="'+ (conf.curr - 1) +'">'+ conf.prev +'</a>');
    }
    
    //当前组非首组，则输出首页
    if(dict.index > 1 && conf.first && conf.groups !== 0){
        view.push('<a href="javascript:;" class="laypage_first" data-page="1"  title="首页">'+ conf.first +'</a><span>…</span>');
    }
    
    //输出当前页组
    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('<span class="laypage_curr" '+ (/^#/.test(conf.skin) ? 'style="background-color:'+ conf.skin +'"' : '') +'>'+ dict.start +'</span>');
        } else {
            view.push('<a href="javascript:;" data-page="'+ dict.start +'">'+ dict.start +'</a>');
        }
    }
    
    //总页数大于连续分页数，且当前组最大页小于总页，输出尾页
    if(conf.pages > conf.groups && dict.end < conf.pages && conf.last && conf.groups !== 0){
         view.push('<span>…</span><a href="javascript:;" class="laypage_last" title="尾页"  data-page="'+ conf.pages +'">'+ conf.last +'</a>');
    }
    
    //当前页不为尾页时，输出下一页
    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) 
            ? '<span class="page_nomore" title="已没有更多">'+ conf.next +'</span>'
            : '<a href="javascript:;" class="laypage_next" data-page="'+ (conf.curr + 1) +'">'+ conf.next +'</a>';
        }()));
    }
    view.push('<span>共'+conf.pages+'页，'+conf.totalData+'条数据 ');
    var everyPage=conf.everyPage;//每页数据量
    var everyPageTmp='每页'+'<select name="everyPage" id="everyPage-layer">';
    for(var i=1;i<11;i++){
        if(i==everyPage/10){
        	 everyPageTmp +='<option value="'+i+'0" selected="selected">'+i+'0条</option>';
        }else{
        	 everyPageTmp +='<option value="'+i+'0">'+i+'0条</option>';
        }
    }
    everyPageTmp +='</select>数据</span>';
    view.push(everyPageTmp);
    return '<div name="laypage'+ laypage.v +'" class="laypage_main laypageskin_'+ (conf.skin ? (function(skin){
        return /^#/.test(skin) ? 'molv' : skin;
    }(conf.skin)) : 'default') +'" id="laypage_'+ that.config.item +'">'+ view.join('') + function(){
        return conf.skip 
        ? '<span class="laypage_total"><label>到第</label><input type="number" value="'+conf.curr+'" min="1" οnkeyup="this.value=this.value.replace(/\\D/, \'\');" class="laypage_skip"><label>页</label>'
        + '<button type="button" class="laypage_btn">\确定</button></span>' 
        : '';
    }() +'</div>';
};

//跳页
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;

}();