js做分页函数

分页插件

// JavaScript Document//判断浏览器window.browserInfo = {    ie: !-[1, ],    ieAll: /MSIE \d/.test(navigator.userAgent),    FF: !!navigator.userAgent.match(/firefox/i),    webkit: /WebKit\//.test(navigator.userAgent),    chrome: /Chrome\//.test(navigator.userAgent),    opera: /Opera\//.test(navigator.userAgent),    safari: /Apple Computer/.test(navigator.vendor),    mac_geLion: /Mac OS X 1\d\D([7-9]|\d\d)\D/.test(navigator.userAgent),    mac_geMountainLion: /Mac OS X 1\d\D([8-9]|\d\d)\D/.test(navigator.userAgent),    ios: /AppleWebKit/.test(navigator.userAgent) && /Mobile\/\w+/.test(navigator.userAgent),    mobile: this.ios || /Android|webOS|BlackBerry|Opera Mini|Opera Mobi|IEMobile/i.test(navigator.userAgent),    PC: !this.mobile,    mac: this.ios || /Mac/.test(navigator.platform),    windows: /windows/i.test(navigator.platform),};//节点加载完事件$.fn.myinit = function(Fn) {    Fn.apply(this);    return this;};//input的val改变事件$('.text').input(function() {this})可以on绑定;$.fn.input = function(Fn) {    if(window.browserInfo.ie) {        $(this).on('propertychange', function() {            Fn.apply(this);        })    } else {        $(this).on('input', function() {            Fn.apply(this);        })    }};//滚轮滚动事件$(document).mousewheel(function() {this.Down})可以on绑定;$.fn.mousewheel = function(Fn) {    if(window.browserInfo.FF) {        $(this).on('DOMMouseScroll', function(ev) {            var oEvent = ev || event;            this.Down = (oEvent.originalEvent.detail > 0);            Fn.apply(this);        })    } else {        $(this).on('mousewheel', function(ev) {            var oEvent = ev || event;            this.Down = (oEvent.originalEvent.wheelDelta < 0);            Fn.apply(this);        })    }};//拖拽事件$('.move').move(function() { $(this).css({ 'left': '+=' + this.pageXc, 'top': '+=' + this.pageYc }); });$.fn.move = function(Fn) {    $(this).on('mousedown', function(ev) {        this.pageXc = this.pageYc = 0;        var _this = this,            pvrPageX = ev.pageX,            pvrPageY = ev.pageY;        $(document).on('mousemove.thisMove', function(ev) {            ev.preventDefault();            _this.pageXc = ev.pageX - pvrPageX;            _this.pageYc = ev.pageY - pvrPageY;            Fn.apply(_this);            pvrPageX = ev.pageX;            pvrPageY = ev.pageY;        });        $(document).on('mouseup.thisMove', function(ev) {            $(this).off('mousemove.thisMove mouseup.thisMove');        });        //$(this).on('dragend', function(ev) {        //  setTimeout(function() {        //      $(document).mouseup();        //  }, 10);        //});    });};//模拟input滑块事件$('#range .mea').move(rangeFn);var rangeFn = function() {    var _thisParent = $(this).parent();    var _thisParentLeftMin = 0;    var _thisParentLeftMax = _thisParent.width();    var _thisStep = (_thisParentLeftMax - _thisParentLeftMin) * _thisParent.attr('step') / (_thisParent.attr('max') - _thisParent.attr('min'));    var _thisLeft = parseFloat($(this).css('left')) + this.pageXc;    if(_thisLeft >= _thisParentLeftMin && _thisLeft <= _thisParentLeftMax) {        $(this).css({            'left': _thisLeft,        });        $(this).attr('value', Math.round(_thisLeft / _thisStep) * _thisParent.attr('step'));    };};//模拟滚动条var slimScrollFn = function() {    $('.MScroll').each(function() {        var _this = $(this);        _this.removeClass('MScroll');        _this.slimScroll({            height: _this.height(),            allowPageScroll: true,            disableFadeOut: true,            railVisible: true,        });    });};//模拟下拉框var Mchecked = function() {    $(document).on('click', '.Mchecked', function() {        var _this = $(this);        _this.toggleClass('McheckedOn');        _this.siblings('.slimScrollDiv,.MScroll').slideToggle();    });    $(document).on('click', '.Moption', function() {        var _this = $(this);        var _parents = _this.parents('.Mselect');        _parents.children('.slimScrollDiv,.MScroll').slideUp();        _parents.children('.Mchecked').html(_this.html()).removeClass('McheckedOn');        _parents.children('input').val(_this.attr('value')).trigger("change");    });    $(document).on('mouseleave', '.Mselect', function() {        var _this = $(this);        _this.children('.slimScrollDiv,.MScroll').slideUp();        _this.children('.Mchecked').removeClass('McheckedOn');    });};/*! layPage-v1.3.0 分页组件 License MIT  http://laypage.layui.com/*///分页PageFn('Mpage1','hrefPage');var PageFn = function(opage, hrefPage) {    var MPage = $(opage);    var thisPages = MPage.attr('data-pages');    //分页主体插件调用    laypage({        cont: MPage,        pages: thisPages, //可以叫服务端把总页数放在某一个隐藏域，再获取。假设我们获取到的是18        skip: true, //是否开启跳页        last: thisPages, //用于控制尾页        prev: '上一页', //隐藏上一页按钮        next: '下一页', //隐藏下一页按钮        groups: 7, //连续显示分页数        curr: function() {            //通过url获取当前页，也可以同上（pages）方式获取            var str = "/" + hrefPage + "=(\\d+)/";            var reg = eval(str);            var page = location.search.match(reg);            return page ? page[1] : 1;        }(),        jump: function(e, first) { //触发分页后的回调            if(!first) { //一定要加此判断，否则初始时会无限刷新                var search = location.search;                var str = "/" + hrefPage + "=(\\d+)/";                var reg = eval(str);                var page = location.search.match(reg);                if(page) {                    search = search.replace(reg, hrefPage + '=' + e.curr);                } else if(!search) {                    search = search + '?' + hrefPage + '=' + e.curr;                } else {                    search = search + '&' + hrefPage + '=' + e.curr;                }                location.href = search;            }        }    });    MPage.find('.laypage_skip').attr({        'max': thisPages,        'type': 'text'    });    //分页页码不存在时弹层    MPage.find('.laypage_skip').on('keyup', function() {        if(parseFloat(this.value) > parseFloat(this.max) || parseFloat(this.value) < parseFloat(this.min)) {            alert('页码不存在!');            this.value = this.min;        }    });};var PageFnAjax = function(opage, ObjFn) {    var MPage = $(opage);    var thisPages = MPage.attr('data-pages');    //分页主体插件调用    laypage({        cont: MPage,        pages: thisPages, //可以叫服务端把总页数放在某一个隐藏域，再获取。假设我们获取到的是18        skip: true, //是否开启跳页        last: thisPages, //用于控制尾页        prev: '上一页', //隐藏上一页按钮        next: '下一页', //隐藏下一页按钮        groups: 7, //连续显示分页数        curr: function() {            return MPage.attr('data-curr') ? MPage.attr('data-curr') : 1;        }(),        jump: function(e, first) { //触发分页后的回调            if(!first) { //一定要加此判断，否则初始时会无限刷新                MPage.attr('data-curr', e.curr);                ObjFn();                MPage.find('.laypage_skip').attr({                    'max': thisPages,                    'type': 'text'                });            }        }    });    MPage.find('.laypage_skip').attr({        'max': thisPages,        'type': 'text'    });    //分页页码不存在时弹层    MPage.find('.laypage_skip').on('keyup', function() {        if(parseFloat(this.value) > parseFloat(this.max) || parseFloat(this.value) < parseFloat(this.min)) {            alert('页码不存在!');            this.value = this.min;        }    });};//var ev=ev||event;ev.preventDefault();window.event.returnValue=false; return false;$(function() {    //可聚焦元素    $('.canFocus').attr({        "tabindex": "0",        "hidefocus": "true"    });    //模拟滚动条调用    if(!window.browserInfo.webkit) {        slimScrollFn();    }    if(!window.browserInfo.webkit) {        $(document).on('DOMNodeInserted', function(ev) {            slimScrollFn();        });    }    //模拟下拉框调用    Mchecked();});

分页插件源码

/*! layPage-v1.3.0 分页组件 License MIT  http://laypage.layui.com/ By 贤心 */    ! function() {        "use strict";        function a(d) {            var e = "laypagecss";            a.dir = "dir" in a ? a.dir : f.getpath + "/skin/laypage.css", new f(d), a.dir && !b[c](e) && f.use(a.dir, e)        }        a.v = "1.3";        var b = document,            c = "getElementById",            d = "getElementsByTagName",            e = 0,            f = function(a) {                var b = this,                    c = b.config = a || {};                c.item = e++, b.render(!0)            };        f.on = function(a, b, c) {            return a.attachEvent ? a.attachEvent("on" + b, function() {                c.call(a, window.even)            }) : a.addEventListener(b, c, !1), f        }, f.getpath = function() {            var a = document.scripts,                b = a[a.length - 1].src;            return b.substring(0, b.lastIndexOf("/") + 1)        }(), f.use = function(c, e) {}, f.prototype.type = function() {            var a = this.config;            return "object" == typeof a.cont ? void 0 === a.cont.length ? 2 : 3 : void 0        }, f.prototype.view = function() {            var b = this,                c = b.config,                d = [],                e = {};            if(c.pages = 0 | c.pages, c.curr = 0 | c.curr || 1, c.groups = "groups" in c ? 0 | c.groups : 5, c.first = "first" in c ? c.first : "&#x9996;&#x9875;", c.last = "last" in c ? c.last : "&#x5C3E;&#x9875;", c.prev = "prev" in c ? c.prev : "&#x4E0A;&#x4E00;&#x9875;", c.next = "next" in c ? c.next : "&#x4E0B;&#x4E00;&#x9875;", c.pages <= 1) {                return ""            }            for(c.groups > c.pages && (c.groups = c.pages), e.index = Math.ceil((c.curr + (c.groups > 1 && c.groups !== c.pages ? 1 : 0)) / (0 === c.groups ? 1 : c.groups)), c.curr > 1 && c.prev && d.push('<a href="javascript:;" class="laypage_prev" data-page="' + (c.curr - 1) + '">' + c.prev + "</a>"), e.index > 1 && c.first && 0 !== c.groups && d.push('<a href="javascript:;" class="laypage_first" data-page="1"  title="&#x9996;&#x9875;">' + c.first + "</a><span>&#x2026;</span>"), e.poor = Math.floor((c.groups - 1) / 2), e.start = e.index > 1 ? c.curr - e.poor : 1, e.end = e.index > 1 ? function() {                    var a = c.curr + (c.groups - e.poor - 1);                    return a > c.pages ? c.pages : a                }() : c.groups, e.end - e.start < c.groups - 1 && (e.start = e.end - c.groups + 1); e.start <= e.end; e.start++) {                e.start === c.curr ? d.push('<span class="laypage_curr" ' + (/^#/.test(c.skin) ? 'style="background-color:' + c.skin + '"' : "") + ">" + e.start + "</span>") : d.push('<a href="javascript:;" data-page="' + e.start + '">' + e.start + "</a>")            }            return c.pages > c.groups && e.end < c.pages && c.last && 0 !== c.groups && d.push('<span>&#x2026;</span><a href="javascript:;" class="laypage_last" title="&#x5C3E;&#x9875;"  data-page="' + c.pages + '">' + c.last + "</a>"), e.flow = !c.prev && 0 === c.groups, (c.curr !== c.pages && c.next || e.flow) && d.push(function() {                return e.flow && c.curr === c.pages ? '<span class="page_nomore" title="&#x5DF2;&#x6CA1;&#x6709;&#x66F4;&#x591A;">' + c.next + "</span>" : '<a href="javascript:;" class="laypage_next" data-page="' + (c.curr + 1) + '">' + c.next + "</a>"            }()), '<div name="laypage' + a.v + '" class="laypage_main laypageskin_' + (c.skin ? function(a) {                return /^#/.test(a) ? "molv" : a            }(c.skin) : "default") + '" id="laypage_' + b.config.item + '">' + d.join("") + function() {                return c.skip ? '<span class="laypage_total"><label>跳转到：</label><input type="number" min="1" onkeyup="this.value=this.value.replace(/\\D/, \'\');" class="laypage_skip"><label> </label><button type="button" class="laypage_btn">Go</button></span>' : ""            }() + "</div>"        }, f.prototype.jump = function(a) {            if(a) {                for(var b = this, c = b.config, e = a.children, g = a[d]("button")[0], h = a[d]("input")[0], i = 0, j = e.length; j > i; i += 1) {                    "a" === e[i].nodeName.toLowerCase() && f.on(e[i], "click", function() {                        var a = 0 | this.getAttribute("data-page");                        c.curr = a, b.render()                    })                }                g && f.on(g, "click", function() {                    var a = 0 | h.value.replace(/\s|\D/g, "");                    a && a <= c.pages && (c.curr = a, b.render())                })            }        }, f.prototype.render = function(a) {            var d = this,                e = d.config,                f = d.type(),                g = d.view();            2 === f ? e.cont.innerHTML = g : 3 === f ? e.cont.html(g) : b[c](e.cont).innerHTML = g, e.jump && e.jump(e, a), d.jump(b[c]("laypage_" + e.item)), e.hash && !a && (location.hash = "!" + e.hash + "=" + e.curr)        }, "function" == typeof define ? define(function() {            return a        }) : "undefined" != typeof exports ? module.exports = a : window.laypage = a    }();

应用插件做分页

var PortAddress = "http://r.n.cc"; //端口地址var tempList = {    pageTempNum: 12, //保存一屏模板数量    pageTotalNum: 1, //保存模板count总数    currPage: 1, //保存当前页码数    totalPages: 1, //保存翻页总数      currTempType: null, //保存当前模板类型    getTempClassify: function() { //渲染模板分类        $.ajax({            type: "post",            url: "/i/t",            data: {},            success: function(res) {                if(res.error == 0) {                    var data = res.invitationTempletTyp;                    var html = '';                    if(data) {                        for(var i = 0; i < data.length; i++) {                            html += '<li data-id="' + data[i].id + '">';                            html += '<span>' + data[i].name + '</span>';                            html += '</li>';                        }                    }                    $('.TempNav').append(html);                } else {                    alert('网络故障，请稍后重试！');                }            }        });    },    initTempList: function(type) { //根据模板类型初始化模板列表        var pageNum = this.pageTempNum;        this.changePage(type, pageNum, 1);    },    changePage: function(type, pageSize, currPage) { //跳转页面        $.ajax({            type: "post",            url: "/i/t",            data: {                code: type,                pageSize: pageSize,                currentPage: currPage            },            success: function(res) {                if(res.error == 0) {                    this.currPage = currPage;                    this.pageTotalNum = res.count;                    var pageNum = Math.ceil(res.count / pageSize);                    $('#Mpage1').attr({                        'data-pages': pageNum,                        'data-curr': currPage                    });                    PageFnAjax('#Mpage1', function() {                        var newCurrNum = $('#Mpage1').attr('data-curr');                        this.currPage = newCurrNum;                        tempList.changePage(type, pageSize, newCurrNum);                    });                    var html = '';                    var price,                        userCount;                    console.log('当页数量:' + res.data.length,'返回数据总数:' + res.count);                    var data = res.data;                    if(data.length != 0) {                        $('.blankImg').hide();                         for(var i = 0; i < data.length; i++) {                            price = data[i].free == 0 ? '免费' : data[i].price;                            userCount = data[i].userCount == null ? 0 : data[i].userCount;                            html += '           <li>';                            html += '               <div>';                                                html += '                    <img class="tempPoster" src="' + data[i].image_path + '" alt="">';                            html += '                    <div class="infoTop">';                            html += '                        <p class="infoTitle textOverflow">' + data[i].title + '</p>';                            html += '                        <p class="infoPrice">' + price + '</p>';                            html += '                    </div>';                            html += '                    <div class="infoBtm">';                            html += '                        <a href="/i/b?Id=' + data[i].id + '" class="btnBuild">制作</a>';                            html += '                        <div class="infoType">';                            html += '                            <p>类型：' + data[i].kind_name + '</p>';                            html += '                            <p>人气：' + userCount + '</p>';                            html += '                        </div>';                            html += '                    </div>';                            html += '                </div>';                            html += '            </li>';                        }                    }else{                        $('.blankImg').show();                     }                    $('.TempList').html(html);                }            }        });    }.bind(this),    pageInit: function() { //整体页面初始化        this.getTempClassify();        this.initTempList();    },    startBuild: function(id){ //点击开始制作        var url = '';        window.location.href = url + '?templetId=' + id;    }}tempList.pageInit();$(function(){    //点击模板分类    $('.TempNav').on('click','li',function(){        var that = this;        var id;        $(that).addClass('active').siblings().removeClass('active');        if($(that).index() == 0){            tempList.initTempList();        }else{            id = parseInt($(that).attr('data-id'));            tempList.initTempList(id);        }    });})