为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 jquery...

jquery _分页插件_01..............................

标签：
JavaScript 
//分页插件
/**
 2014-08-05 ch
 **/
(function($){
    var ms = {
        init:function(obj,args){
            return (function(){
                ms.fillHtml(obj,args);
                ms.bindEvent(obj,args);
            })();
        },
        //填充html
        fillHtml:function(obj,args){
            return (function(){
                obj.empty();
                //上一页
                if(args.current > 1){
                    obj.append('<a href="javascript:;" class="prevPage">上一页</a>');
                }else{
                    obj.remove('.prevPage');
                    obj.append('<span class="disabled">上一页</span>');
                }
                //中间页码
                if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
                    obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>');
                }
                if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){
                    obj.append('<span>...</span>');
                }
                var start = args.current -2,end = args.current+2;
                if((start > 1 && args.current < 4)||args.current == 1){
                    end++;
                }
                if(args.current > args.pageCount-4 && args.current >= args.pageCount){
                    start--;
                }
                for (;start <= end; start++) {
                    if(start <= args.pageCount && start >= 1){
                        if(start != args.current){
                            obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>');
                        }else{
                            obj.append('<span class="current">'+ start +'</span>');
                        }
                    }
                }
                if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){
                    obj.append('<span>...</span>');
                }
                if(args.current != args.pageCount && args.current < args.pageCount -2  && args.pageCount != 4){
                    obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>');
                }
                //下一页
                if(args.current < args.pageCount){
                    obj.append('<a href="javascript:;" class="nextPage">下一页</a>');
                }else{
                    obj.remove('.nextPage');
                    obj.append('<span class="disabled">下一页</span>');
                }
            })();
        },
        //绑定事件
        bindEvent:function(obj,args){
            return (function(){
                obj.on("click","a.tcdNumber",function(){
                    var current = parseInt($(this).text());
                    ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current);
                    }
                });
                //上一页
                obj.on("click","a.prevPage",function(){
                    var current = parseInt(obj.children("span.current").text());
                    ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current-1);
                    }
                });
                //下一页
                obj.on("click","a.nextPage",function(){
                    var current = parseInt(obj.children("span.current").text());
                    ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current+1);
                    }
                });
            })();
        }
    }
    $.fn.createPage = function(options){
        var args = $.extend({
            pageCount : 10,
            current : 1,
            backFn : function(){}
        },options);
        ms.init(this,args);
    }
})(jQuery);

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .tcdPageCode{
            padding: 15px 20px;
            text-align: left;
            color: #ccc;
        }
        .tcdPageCode a{
            display: inline-block;
            color: #428bca;
            display: inline-block;
            height: 25px;
            line-height: 25px;
            padding: 0 10px;
            border: 1px solid #ddd;
            margin: 0 2px;
            border-radius: 4px;
            vertical-align: middle;
        }
        .tcdPageCode a:hover{
            text-decoration: none;
            border: 1px solid #428bca;
        }
        .tcdPageCode span.current{
            display: inline-block;
            height: 25px;
            line-height: 25px;
            padding: 0 10px;
            margin: 0 2px;
            color: #fff;
            background-color: #428bca;
            border: 1px solid #428bca;
            border-radius: 4px;
            vertical-align: middle;
        }
        .tcdPageCode span.disabled{
            display: inline-block;
            height: 25px;
            line-height: 25px;
            padding: 0 10px;
            margin: 0 2px;
            color: #bfbfbf;
            background: #f2f2f2;
            border: 1px solid #bfbfbf;
            border-radius: 4px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div id="page" class="page">
        <ul class="tcdPageCode">
        </ul>
    </div>

    <div class="container p0">
        <ul class="product-list"><!-- 产品列表 -->

        </ul>
    </div>

    <div class="loading hide"><i class="fa fa-spinner fa-spin"></i></div>
    <div class="back-top hide"><i class="fa fa-chevron-up"></i></div>
</body>
</html>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="assets/js/package/jquery.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="assets/js/package/jquery.pagination.js"></script>
    <script>
    $(".tcdPageCode").createPage({
        pageCount:10,
        current:1,
        backFn:function(p){
            console.log(p)
            $.ajax({
                /*请求后台直接问号传参,如/json-data.do?num='+num+'  http://192.168.1.209:8080/ssm/Demo1/toShow2.action*/
                url: 'datas/' + p + '.json',
                type:'get',
                success: function (item) {
                    var str=0;
                    for(var i=0;i<item.length;i++){
                         str+='<li class="col-xs-6">'+
                            '<a href="'+ item[i].URL + '">'+
                            '<div class="img-content">'+
                            '<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/' + item[i].imageUrl + '" alt="全栈工程师">'+
                            '</div>'+
                            '<div class="text-content p15">'+
                            '<p>' + item[i].productText + '</p>'+
                            '</div>'+
                            '<div class="price-content p15">'+
                            '<small>￥</small><strong>' + item[i].productPrice + '</strong>'+
                            '</div>'+
                            '<div class="comment-content p15">'+
                            '<small>' + item[i].productEvaluate + '</small><span>条评论</span>'+
                            '</div>'+
                            '</a>'+
                            '</li>'
                    }

                    $(".product-list").html(str);
                },
                error: function () {
                    alert('出错了');
                }
            })
        }
    });
</script>

图片描述

[{
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "花花花花",
    "imageUrl": "11.jpg",
    "productText": "妖精的口袋欧美风宽松夏装",
    "productPrice": "179.10",
    "productEvaluate": "199"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "花花花花",
    "imageUrl": "12.jpg",
    "productText": "AINUOER.MY蕾丝欧美修身长裙",
    "productPrice": "258.00",
    "productEvaluate": "414"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "花花花花",
    "imageUrl": "13.jpg",
    "productText": "筱姿春夏蕾丝白色复古裙",
    "productPrice": "248.00",
    "productEvaluate": "358"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "花花花花",
    "imageUrl": "14.jpg",
    "productText": "莎琳达 2016时尚休闲阔腿短裤套装女夏季新款印花雪纺衫上衣短袖两件套显瘦女装 紫色 S",
    "productPrice": "65.00",
    "productEvaluate": "1499"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "花花花花",
    "imageUrl": "15.jpg",
    "productText": "衬衫领收腰系带衬衫裙",
    "productPrice": "71.90",
    "productEvaluate": "91"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "16.jpg",
    "productText": "修身气质甜美蓝色复古裙",
    "productPrice": "228.00",
    "productEvaluate": "476"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "17.jpg",
    "productText": "韩格雅春夏韩版雪纺套装裙",
    "productPrice": "128.00",
    "productEvaluate": "3961"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "花花花花",
    "imageUrl": "18.jpg",
    "productText": "甘甘的世界拼接印花连衣裙",
    "productPrice": "268.00",
    "productEvaluate": "121"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "19.jpg",
    "productText": "甘甘的世界夏季韩版雪纺裙",
    "productPrice": "318.00",
    "productEvaluate": "118"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "20.jpg",
    "productText": "诱惑透明性感蕾丝大码制服",
    "productPrice": "11.00",
    "productEvaluate": "1331"
}]

[{
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "21.jpg",
    "productText": "萌卓夏季印花中长款雪纺裙",
    "productPrice": "138.00",
    "productEvaluate": "8131"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "花花花花",
    "imageUrl": "22.jpg",
    "productText": "MO&Co.长袖女月亮蓝色衬衫裙",
    "productPrice": "1039.00",
    "productEvaluate": "61"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "23.jpg",
    "productText": "衣锦霓裳夏季薄款套装裙",
    "productPrice": "79.00",
    "productEvaluate": "2264"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "花花花花",
    "imageUrl": "24.jpg",
    "productText": "EKM休闲裤女时尚小脚铅笔裤女装春夏款中学生运动裤女款弹力大码宽松收口长裤子女修身卫裤韩版 藏蓝 单裤0015 S",
    "productPrice": "78.00",
    "productEvaluate": "537"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "25.jpg",
    "productText": "TEREiS夏季女蕾丝雪纺套装裙",
    "productPrice": "158.00",
    "productEvaluate": "1999"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "26.jpg",
    "productText": "阿什兰韩版甜美休闲沙滩裙",
    "productPrice": "118.00",
    "productEvaluate": "1040"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "27.jpg",
    "productText": "茵诗黛尔时尚韩版背心裙",
    "productPrice": "138.00",
    "productEvaluate": "4274"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "28.jpg",
    "productText": "茵诗黛尔时尚打底夏季裙子",
    "productPrice": "138.00",
    "productEvaluate": "2281"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "29.jpg",
    "productText": "巧谷雪纺春夏韩版套装裙",
    "productPrice": "98.00",
    "productEvaluate": "2039"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "30.jpg",
    "productText": "御景蓝韩版修身雪纺套装裙",
    "productPrice": "148.00",
    "productEvaluate": "1913"
}]

[{
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "31.jpg",
    "productText": "轩瑞莹春夏宽松雪纺蕾丝裙",
    "productPrice": "138.00",
    "productEvaluate": "2855"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "32.jpg",
    "productText": "韩格雅雪纺韩版修身棉麻裙",
    "productPrice": "148.00",
    "productEvaluate": "3700"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "33.jpg",
    "productText": "伊莲娜印花夏季黄色真丝裙",
    "productPrice": "398.00",
    "productEvaluate": "332"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "34.jpg",
    "productText": "AINUOER.MY气质七分袖蕾丝裙",
    "productPrice": "258.00",
    "productEvaluate": "420"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "35.jpg",
    "productText": "艾路丝婷夏装新款女装纯色打底衫体恤V领修身短袖T恤女棉3560 黄色 M",
    "productPrice": "56.00",
    "productEvaluate": "1708"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "36.jpg",
    "productText": "甘甘的世界修身印花大摆裙",
    "productPrice": "268.00",
    "productEvaluate": "107"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "37.jpg",
    "productText": "筱姿夏季复古一字领蓬蓬裙",
    "productPrice": "259.00",
    "productEvaluate": "293"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "38.jpg",
    "productText": "韩都衣舍韩版宽松背带裙",
    "productPrice": "112.00",
    "productEvaluate": "611"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "39.jpg",
    "productText": "洛诗琳夏款印花撞色连衣裙",
    "productPrice": "269.00",
    "productEvaluate": "197"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "40.jpg",
    "productText": "夏季新款女修身印花大摆裙",
    "productPrice": "188.00",
    "productEvaluate": "464"
}]

[{
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "41.jpg",
    "productText": "菲丽沫淑韩版甜美蕾丝裙",
    "productPrice": "49.00",
    "productEvaluate": "2069"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "42.jpg",
    "productText": "兰黛萱言韩版时尚修身夏装",
    "productPrice": "188.00",
    "productEvaluate": "4395"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "43.jpg",
    "productText": "韩洛浠春夏修身打底棉麻裙",
    "productPrice": "128.00",
    "productEvaluate": "3233"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "44.jpg",
    "productText": "暖盈好雪纺韩版修身休闲裙",
    "productPrice": "139.00",
    "productEvaluate": "1925"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "45.jpg",
    "productText": "彩婷果时尚休闲潮流高腰裙",
    "productPrice": "139.00",
    "productEvaluate": "2512"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "46.jpg",
    "productText": "莎琳达 秋装2016夏季新款女装韩版褶皱A字裙时尚气质百搭短裙收腰宽松网纱拼接雪纺连衣裙女 香芋紫 S",
    "productPrice": "75.00",
    "productEvaluate": "11"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "47.jpg",
    "productText": "咔优依夏季韩版黑色修身裙",
    "productPrice": "148.00",
    "productEvaluate": "1523"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "48.jpg",
    "productText": "革娅韩版时尚修身瘦身夏装",
    "productPrice": "85.00",
    "productEvaluate": "1773"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "49.jpg",
    "productText": "麦卡欧蒂春夏雪纺女蕾丝裙",
    "productPrice": "128.00",
    "productEvaluate": "2597"
}, {
    "URL": "http://www.dongnaoedu.com",
    "imgAlt": "动脑学院",
    "imageUrl": "50.jpg",
    "productText": "婷婷伊莉婷婷韩版修身夏装",
    "productPrice": "158.00",
    "productEvaluate": "1004"
}]

www.jq22.com/yanshi1118

www.jq22.com/jquery-info1118

点击查看更多内容
发表于 2017.12.27 09:49， 共 2603 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

qaytix

Web前端工程师
手记
篇
粉丝
37
获赞与收藏
165

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消