jquery插件分页

先看效果:我弄的是一页1条数据

jquery插件分页


下面直接上代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jquery ajax 分页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="stilearning" />
    <link href="/static/home/css/css.css" rel="stylesheet">
    <script src="/static/js/jquery-1.10.2.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    #fpage{width: 595px;margin: 0px auto;padding: 10px 0px 30px;font-size: 12px;}
    #fpage span{border: 1px solid #ccc;border-radius: 3px;padding: 6px 10px;margin-left:3px;}
    #fpage span:hover{background: #3B99FC;color: #fff;border: 1px solid #3B99FC;}
    #fpage span:hover a{color: #fff;}
    #fpage span.active{background: #3B99FC;color: #fff;border: 1px solid #3B99FC;}
    #fpage span.active a{color: #fff;}
    #myredirect{width: 30px;padding-top: 5px;padding-bottom: 5px;height: 16px;text-align: center;border: 1px solid #ccc;border-radius: 4px;margin-left: 10px;}
   </style>
</head>
<body style="background:#f5f5f5;">
    <header class="i_header">jquery ajax 分页</header>
    <div class="arc">
        <div class="arc_ul" id="list"></div>
        <div id="fpage"></div>
    </div>
    <footer class="i_footer">底部版权</footer>

<script>
//ajax分页插件
(function($){
    $.fn.paging = function(options){
            var ops = $.extend(true,$.fn.paging.defaults, options);
            ops.mythis = this;

            //分页数据函数,得到数据并显示
            var getData = function(page,size){
                var data =$.extend({},ops.data, {page:page,size:size});
                $.ajax({
                    type:ops.type,
                    url:ops.url,
                    data:data,
                    dataType:ops.dataType,
                    beforeSend: ops.beforeSend,
                    success: function(json){
                        ops.list(json);
                        getPageBar(json);
                        ops.fpage(json);
                    }
                });
            }
            getData(1,ops.size);

            var totalPage;//总页数
            //*分页条显示函数
            var getPageBar = function(json){
                var total = json.status;//总条数
                if(!total){
                    return ;
                }
                totalPage = Math.ceil(total/ops.size);//总页数
                var page = ops.page;//当前页

                //当前页大于最大页数
                if(page>totalPage) page = totalPage;
                //当前页小于1
                if(page<1) page=1;
                 
                var pageStr= ' <span>共'+total+'条 </span> <span>'+page+'/'+totalPage+'</span>';
                //如果是第一页
                if(page != 1){
                    pageStr += ' <span><a href="javascript:void(0)" rel="1">首页</a></span> <span><a href="javascript:void(0)" rel="'+(page-1)+'">上一页</a></span>';
                }

                var cnum = parseInt(ops.maxnum/2);//数字分页的中间数
                var start = page-cnum<1? 1:page-cnum;//数字开始
                var end = page+cnum>totalPage ? totalPage : page+cnum;//数字结束
                for(var i=start;i<=end;i++){
                    if(i==page){
                        pageStr += ' <span class="active"><a href="javascript:void(0)" rel="'+i+'">'+i+'</a></span>';
                    }else{
                        pageStr += ' <span><a href="javascript:void(0)" rel="'+i+'">'+i+'</a></span>';
                    }
                }

                //如果是最后页
                if(page<totalPage){
                    pageStr += ' <span><a href="javascript:void(0)" rel="'+(page+1)+'">下一页</a></span> <span><a href="javascript:void(0)" rel="'+totalPage+'">尾页</a></span>';
                }
                pageStr += '<input type="text" id="myredirect" class="myredirect">'
                ops.mythis.html(pageStr);
                ops.mythis.find(".myredirect").val(ops.page);
                ops.mythis.find(".myredirect").focus();
            }

            //点击分页跳转
            ops.mythis.on('click', 'span a', function(event) {
                ops.page = parseInt($(this).attr("rel"));
                if(ops.page){getData(ops.page,ops.size);}
            });

            //datatables分页跳转
            ops.mythis.on('keyup','.myredirect',function(e){
                var ipage = parseInt($(this).val());
                if(isNaN(ipage) || ipage<1){
                    return false;
                }else if(ipage>totalPage){
                    ipage=totalPage;
                }
                ops.page = ipage;
                getData(ipage,ops.size);
            });

        return this;
    };

    $.fn.paging.defaults = {
        page:1,//当前第几页
        size:3,//每页显示数
        maxnum:4,//数字分页数 1 2 3 4 5 这样的
        mythis:{},//当前的分页对象
        data:{},//发向后台的额外数据
        list:function(){},//列表
        fpage:function(){},//显示分页
        url:"/home/list",//后台地址
        type:"GET",//发送方式
        dataType:"json",//默认的
        beforeSend: function(){$("#list").append('<liid="loading">loading……</li>');},
    }

})(jQuery);

$(function(){

    //使用方法一
    $("#fpage").paging({
        page:1,
        size:3,
        fpage:function(json){
            console.log(json);
            //$("#fpage").html("hello world");//这里你可以自己改成你想要的分页样式
        },
        list:function(json){
            var html="";
            var list = json.data;
            $.each(list,function(k,v){
                 html += '<div class="arc_list"><div class="pic"><img src="/static/home/images/7000_2.jpg"></div><h3>'+v.name+'</h3></div>';
            });
            $("#list").html(html);
        }
    });

    //使用方法二 插件的defaults 
    $.extend(true,$.fn.paging.defaults,{
        page:1,//当前第几页
        size:1,//每页显示数
        list:function(json){
            var html="";
            var list = json.data;
            $.each(list,function(k,v){
                 html += '<div class="arc_list"><div class="pic"><img src="/static/home/images/7000_2.jpg"></div><h3>'+v.name+'</h3></div>';
            });
            $("#list").html(html);
        },//列表
        url:"/home/list",//后台地址
    }); 
    $("#fpage").paging();
    
});
</script>
</body>
</html>



你可能感兴趣的:(jquery插件分页)