• 回忆之分页


    直接看效果点这里

    HTML

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>分页插件</title>
    <link rel="stylesheet" href="page.min.css"/>
    </head>
    <body>
    <script src="page.min.js"></script>
    <script>
        /**
         * Created by jununx@gmail.com on 14-9-23.
         *
         * 分页
         * @param       box{[id]}               该分页放在什么容器里,默认随机创建一个id添加到body里
         * @param       isHeadAndTail{bool}     是否显示首页/尾页,默认true
         * @param       maxPage{number}         最多显示页码,默认10
         * @param       currPage{number}        当前页,默认1
         * @param       currPagePos{number}     当前页位置,默认4,必须小于页码数
         * @param       pageNum{number}         每页显示多少条数据,默认10
         * @param       countNum{number}        一共有多少条数据,默认0
         *
         * @event       onChange(n)             每次切换页码时执行,n表示切换到某页
         *
         */
    
        var page = new Page({
            'countNum': 0,
            'onChange': function(n){
                alert('你选择了第'+n+'页。');
            }
        });
    
        var page2 = new Page({
            'countNum': 50,
            'onChange': function(n){
                alert('你选择了第'+n+'页。');
            }
        });
    
        var page3 = new Page({
            'countNum': 99,
            'onChange': function(n){
                alert('你选择了第'+n+'页。');
            }
        });
    
        var page4 = new Page({
            'countNum': 1001,
            'onChange': function(n){
                alert('你选择了第'+n+'页。');
            }
        });
        page4.render(101);
    </script>
    </body>
    </html>
    View Code

    CSS

    @charset "utf-8";
    html, body { margin: 0; padding: 0; }
    a,a:link,a:visited,a:hover,a:active,a:focus { text-decoration: none; }
    
    .m_page { text-align: center; font-size: 12px; color: #666; }
    .page_main a,.page_select,.page_btn { border-radius: 3px; border: 1px #ccc solid; }
    .page_main a { display:inline-block; vertical-align:top; padding: 5px 10px; margin: 0 3px; color: #333; background-color: #fff; }
    .page_main a:hover { border-color: #ccc; }
    .page_main .page_active,.page_main a:hover,.page_btn:hover { color:#fff; border-color:#125dae; background-color:#2173cd; text-decoration: none; }
    .page_main .page_active { cursor: default; }
    .page_main .page_prev { padding-left: 20px; }
    .page_main .page_next { padding-right: 20px; }
    .page_prev,.page_next { position: relative; }
    .page_prev i,.page_next i { position: absolute; top: 8px; border-style: solid; border-width: 4px; font-size: 0; height: 0; line-height: 0; width: 0; }
    .page_prev i { left: 5px; border-color: #fff #666 #fff #fff;}
    .page_next i { right: 5px; border-color: #fff #fff #fff #666;}
    .page_prev:hover i { border-color: #2173cd #fff #2173cd #2173cd;}
    .page_next:hover i { border-color: #2173cd #2173cd #2173cd #fff;}
    .page_info { padding: 5px 0; color: #999; line-height: 24px; }
    .page_select { width: 24px; height: 22px; line-height: 22px; padding: 0 5px; color: #666; margin: 0 3px; text-align: center; }
    .page_btn { width: 50px; height: 24px; background: none; cursor: pointer; }
    View Code
    /**
     * Created by jununx@gmail.com on 14-9-23.
     *
     * 分页
     * @param       box{[id]}               该分页放在什么容器里,默认随机创建一个id添加到body里
     * @param       isHeadAndTail{bool}     是否显示首页/尾页,默认true
     * @param       maxPage{number}         最多显示页码,默认10
     * @param       currPage{number}        当前页,默认1
     * @param       currPagePos{number}     当前页位置,默认4,必须小于页码数
     * @param       pageNum{number}         每页显示多少条数据,默认10
     * @param       countNum{number}        一共有多少条数据,默认0
     *
     * @event       onChange(n)             每次切换页码时执行,n表示切换到某页
     *
     */
    
    var PageTools = {
        create: function() {
            return function() {
                this.init.apply(this, arguments);
            }
        },
        extend: function (d, s){
            for(var i in s){
                d[i] = s[i];
            }
            return d;
        },
        bindEvent: function(o, ev, fn){
            window.addEventListener ? o.addEventListener(ev, fn, false) : o.attachEvent('on'+ev, fn);
        },
        getByClass: function (classname, parent, nodename) {
            var parent = parent || document, nodename = nodename || "*";
            if(parent.getElementsByClassName){
                return parent.getElementsByClassName(classname);
            }else{
                var l = parent.getElementsByTagName(nodename);
                return function () {
                    var res = [];
                    for (var i = 0, j = l.length; i < j; i++) {
                        if (l[i].className){
                            var name = " " + l[i].className + " ";
                            if (name.indexOf(" " + classname + " ") != -1) {
                                res.push(l[i]);
                            }
                        }
                    }
                    return res;
                } ();
            }
        },
        getById: function(id){
            return document.getElementById(id);
        }
    };
    
    var Page = PageTools.create();
    
    Page.prototype = {
        init: function(opts){
            this.opts = PageTools.extend({
                'isHeadAndTail': true,
                'box': 'page'+Math.floor(Math.random() * new Date().getTime()),
                'currPage': 1,
                'currPagePos': 4,
                'maxPage': 10,
                'pageNum': 10,
                'countNum': 0,
                'countPage': 0,
                'onChange': function(n){}
            }, opts || {});
    
            this.bState = true;
            this.render(this.opts.currPage || 1);
        },
        render: function(currPage){
            //没有数据的直接返回
            if(this.opts.countNum < 1){ return false; }
    
            var countPage = this.opts.countPage = Math.ceil(this.opts.countNum/this.opts.pageNum), maxPage = this.opts.maxPage - 1, startPageNum = 0, endPageNum = 0;
    
            if(currPage < 1 || typeof currPage === 'undefined'){
                currPage = 1;
            }else if(currPage > countPage){
                currPage = countPage;
            }
    
            var htmltpl = '<div class="m_page"><div class="page_main">', This = this;
    
            if(this.opts.isHeadAndTail && currPage != 1){
                htmltpl += '<a class="page_first" href="javascript:;">首页</a>';
            }
    
            htmltpl += '<a class="page_prev" href="javascript:;"><i></i>上一页</a>';
    
            if(currPage <= this.opts.currPagePos){
                startPageNum = 1;
            }else if(currPage > (countPage - maxPage)){
                startPageNum = countPage - maxPage < 1 ? 1 : countPage - maxPage;
            }else{
                startPageNum = currPage - this.opts.currPagePos;
            }
    
            if(startPageNum + maxPage >= countPage){
                endPageNum = countPage;
            }else{
                endPageNum = startPageNum + maxPage;
            }
    
            for(var i = startPageNum; i <= endPageNum; i++){
                if(i === currPage){
                    htmltpl += '<a class="page_active" href="javascript:;">'+i+'</a>';
                }else{
                    htmltpl += '<a class="page_num" href="javascript:;">'+i+'</a>';
                }
            }
    
            htmltpl += '<a href="javascript:;" class="page_next">下一页<i></i></a>';
    
            if(this.opts.isHeadAndTail && currPage != countPage){
                htmltpl += '<a href="javascript:;" class="page_last">尾页</a>';
            }
    
            htmltpl += '</div><div class="page_info">共<span class="page_count_record">'+this.opts.countNum+'</span>条记录,共<span class="page_count_pagination">'+countPage+'</span>页,当前显示第<span class="page_range">'+((currPage-1)*this.opts.pageNum + 1) +'-'+(this.opts.countNum < this.opts.pageNum ? this.opts.countNum : currPage*this.opts.pageNum > this.opts.countNum ? this.opts.countNum : currPage*this.opts.pageNum)+'</span>条,到<input type="text" class="page_select" value="">页,<button class="page_btn">确定</button></div></div>';
    
            this.opts.currPage = currPage;
    
            var oBox = document.getElementById(this.opts.box);
            if(oBox){
                oBox.innerHTML = htmltpl;
            }else{
                oBox = document.createElement('div');
                oBox.id = this.opts.box;
                oBox.innerHTML = htmltpl;
                document.getElementsByTagName('body')[0].appendChild(oBox);
            }
    
            if(this.bState){
                // TODO:不添加开关会执行多次
                this.bState = false;
                PageTools.bindEvent(oBox, 'click', function(e){
                    var ev = e || window.event;
                    var target = ev.target || ev.srcElement;
                    This.events(target);
                });
            }
        },
        events: function(target){
            switch (target.className){
                case 'page_num':
                    this.goPage(parseInt(target.innerHTML, 10));
                    break;
                case 'page_first':
                    this.firstPage();
                    break;
                case 'page_prev':
                    this.prevPage();
                    break;
                case 'page_next':
                    this.nextPage();
                    break;
                case 'page_last':
                    this.lastPage();
                    break;
                case 'page_btn':
                    var n = parseInt(target.previousElementSibling ? target.previousElementSibling.value : PageTools.getByClass('page_select', PageTools.getById(this.opts.box))[0].value, 10);
                    if(isNaN(n) || n == 0){
                        n = 1;
                    }else if(n > this.opts.countPage){
                        n = this.opts.countPage;
                    }
                    this.goPage(n);
                    break;
            }
        },
        firstPage: function(){
            this.render(1);
            this.opts.onChange(1);
        },
        prevPage: function(){
            var n = this.opts.currPage > 1 ? this.opts.currPage - 1 : 1;
            this.render(n);
            this.opts.onChange(n);
        },
        lastPage: function(){
            var n = this.opts.countPage;
            this.render(n);
            this.opts.onChange(n);
        },
        nextPage: function(){
            var n = this.opts.currPage < this.opts.countPage ? this.opts.currPage + 1 : this.opts.countPage;
            this.render(n);
            this.opts.onChange(n);
        },
        goPage: function(n){
            this.render(n);
            this.opts.onChange(n);
        }
    };
  • 相关阅读:
    PHP fread() 函数
    PHP fputs() 函数
    PHP fputcsv() 函数
    PHP fpassthru() 函数
    分区表基本类型
    C# const 和 readonly 有什么区别
    win2d 画出好看的图形
    win2d 画出好看的图形
    win2d 渐变颜色
    win2d 渐变颜色
  • 原文地址:https://www.cnblogs.com/jununx/p/4472907.html
走看看 - 开发者的网上家园