闲来无事撸个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 = $('
'),
            psoCon = $('
'),
            pso_total = $('
'),
            pso_select = $(''),
            pnCon = $('
'),
            pn_pn = $('
'),
            pn_sel = $('
'),
            pn_sel_btn = $('跳转'),
            pn_sel_in = $('');
            
            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($(' 至 ')).append(pn_sel_in).append($(' 页 '))));
            $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($(''+c.pageSizeOption[i]+'条每页'))
                };
            }
            $this.create_pn_pn_child = function(){
                var c = $this.configure;
                pn_pn.empty();

                var prew = $('
«
');
                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'+i+'');
                        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 = $('
'+i+'
');
                        li.on('click',{value:i},function(e){
                            $this.jumpto(e.data.value)
                        });
                        pn_pn.append(li);
                    }
                }
                var next = $('
»
');
                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)

使用方法