闲来无事撸个pagination

/**
 * 依赖jquery，bootstrap3
 */
(function($){
    var defaultConfigure = {
        total: 0,
        current: 1,
        pageSize:10,
        totalpage:1,
        shownumber:8,
        pageSizeOption:[10,20,30,40,50]
    }
    $.fn.extend({
        pagination: function(configure,onchange) {
            var $this = $(this),
            newConfigure = $.extend(true,{},defaultConfigure,configure),
            totalpage = newConfigure.total === 0 ? 1 : Math.ceil(newConfigure.total/newConfigure.pageSize),
            con = $('<div style="white-space:nowrap; height:32px; line-height: 32px"></div>'),
            psoCon = $('<div class="text-multe pull-left"></div>'),
            pso_total = $('<div style="display:inline-block;margin-right:15px"></div>'),
            pso_select = $('<select style="background-color: white;height:32px"></select>'),
            pnCon = $('<div class="text-right"></div>'),
            pn_pn = $('<ul class="pagination" style="margin:0;margin-right:5px"></ul>'),
            pn_sel = $('<div style="display:inline-block;" class="pull-right"></div>'),
            pn_sel_btn = $('<button style="display:inline-block;" class="btn btn-default btn-sm">跳转</button>'),
            pn_sel_in = $('<input style="width:40px;display:inline-block" class="form-control input-sm " type="text" placeholder="">');
            
            newConfigure.totalpage = totalpage;
            $this.configure = newConfigure;
            
            con.append(psoCon.append(pso_total).append(pso_select));
            con.append(pnCon.append(pn_pn).append(pn_sel.append(pn_sel_btn).append($('<span>&nbsp;至&nbsp;</span>')).append(pn_sel_in).append($('<span>&nbsp;页&nbsp;</span>'))));
            $this.append(con);

            pn_sel_btn.on('click',function(){
                $this.jumpto(parseInt(pn_sel_in.val()))
            });
            pso_select.on('change',function(e){
                var c = $this.configure;
                c.pageSize = parseInt(e.target.value);
                c.totalpage = Math.ceil(c.total / c.pageSize);
                $this.refresh();
                if(onchange){
                    onchange({
                        totalpage: c.totalpage,
                        current: c.current,
                        pageSize: c.pageSize
                    });
                }
            });

            $this.createDetail = function(){
                var c = $this.configure;
                pso_total.text('总共'+c.total+'条,'+(c.total === 0 ? 1 : Math.ceil(c.total/c.pageSize))+'页');
                for(var i in c.pageSizeOption){
                    pso_select.append($('<option value=\"'+c.pageSizeOption[i]+'\">'+c.pageSizeOption[i]+'条每页</option>'))
                };
            }
            $this.create_pn_pn_child = function(){
                var c = $this.configure;
                pn_pn.empty();

                var prew = $('<li><a href="#">&laquo;</a></li>');
                prew.on('click',$this.prew);
                pn_pn.append(prew);

                var totalpage = c.totalpage;
                if(totalpage > c.shownumber){
                    var start = c.current - Math.floor(c.shownumber/2);
                    start = (start + c.shownumber - 1) > totalpage ? totalpage - c.shownumber + 1 : start;
                    start = start <= 0 ? 1 : start;
                    for(var i=start;i<c.shownumber + start;i++){
                        var li = $('<li '+(c.current === i ? 'class=\"active\"' : '') +'><a href="#">'+i+'</a></li>');
                        li.on('click',{value:i},function(e){
                            $this.jumpto(e.data.value)
                        });
                        pn_pn.append(li);
                    }
                }
                else{
                    for(var i=1; i<=totalpage; i++){
                        var li = $('<li '+(c.current === i ? 'class=\"active\"' : '') +'><a href="#">'+i+'</a></li>');
                        li.on('click',{value:i},function(e){
                            $this.jumpto(e.data.value)
                        });
                        pn_pn.append(li);
                    }
                }
                var next = $('<li><a href="#">&raquo;</a></li>');
                next.on('click',function(){
                    $this.next();
                });
                pn_pn.append(next);
            }
            $this.createDetail();
            $this.create_pn_pn_child();
            
            //跳转至某页
            $this.prew = function(){
                if($this.configure.current === 1)return;
                $this.jumpto($this.configure.current-1)
            }
            $this.jumpto = function(number){
                if(number<1 || number>$this.configure.totalpage)throw new Error('您选择的野马超出范围!');
                $this.configure.current = number;
                $this.create_pn_pn_child();
                if(onchange){
                    onchange({
                        totalpage: $this.configure.totalpage,
                        current: $this.configure.current,
                        pageSize: $this.configure.pageSize
                    });
                }
            }
            $this.next = function(){
                var c = $this.configure;
                var totalpage = c.totalpage;
                if(c.current === totalpage)return;
                $this.jumpto(c.current+1)
            }
            $this.refresh = function(configure){
                var $nc = configure || {},
                newConfigure = $.extend(true,{},$this.configure,$nc),
                totalpage = newConfigure.total === 0 ? 1 : Math.ceil(newConfigure.total/newConfigure.pageSize);

                newConfigure.totalpage = totalpage;
                $this.configure = newConfigure;

                var c = $this.configure;
                c.current = c.current > c.totalpage ? c.totalpage : c.current;
                $this.jumpto(c.current)
            }
            return $this
        }
    });
})(jQuery)

使用方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>

<head>
    <title>pagination</title>
    <link rel="stylesheet" type="text/css" href="/tools/bootstrap-3.3.7/css/bootstrap.min.css" />
</head>

<body>

    <div id="p">
    </div>
    <script type="text/javascript" src="/tools/jquery.min.js"></script>
    <script type="text/javascript" src="/tools/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/tools/CGGPagenation.js"></script>
    <script type="text/javascript">
        var $p = $('#p')
        .pagination(
            {total: 800,
            current: 3,
            pageSize:10},
            function(pagination){
                console.log(pagination)
            }
        );
        window.setTimeout(function(){
           $p.refresh(
            {total: 100,
            current: 3,
            pageSize:50}
           ) 
        },3000)
    </script>
</body>
<html>