zoukankan      html  css  js  c++  java
  • 点击加载更多

     $(function () {
    
            /*初始化*/
            var counter = 0;
            /*计数器*/
            var pageStart = 0;
            /*offset*/
            var pageSize = 4;
            /*size*/
            /*首次加载*/
            getData(pageStart, pageSize);
            /*监听加载更多*/
            $(document).on('click', '#showMore', function () {
                counter++;
                pageStart = counter * pageSize;
                getData(pageStart, pageSize);
            });
        });
        function getData(offset, size) {
            $.ajax({
                type: 'GET',
                url: 'msg.json',
                dataType: 'json',
                success: function (reponse) {
                    var data = reponse.list;
                    var sum = reponse.list.length;
                    var result = '';
                    if (sum - offset < size) {
                        size = sum - offset;
                    }
                    /*使用for循环模拟SQL里的limit(offset,size)*/
                    for (var i = offset; i < (offset + size); i++) {
                        result += '<ul id="" class="mg-coupon">' +
                            '<li> <span class="mg-time" style="225px;margin-left:230px">2017-04-01 10:22:30</span>' +
                            '<div class="mg-box">' +
                            '<div class="mg-title">' +
                            '<h5 style="float: left">订单即将关闭</h5>' +
                            '<s class="delMsg" style="cursor:pointer" onclick="logicDeleteMessage()"></s>' +
                            '</div>' +
                            '<div class="mg-content clearfix">' +
                            '<div>您有一笔终端订单即将关闭,请及时完成支付,避免不必要的损失!</div>' +
                            '<a target="_blank" href="" class="mg-details">查看详情&nbsp;&gt;&nbsp;</a>' +
                            '</div> </div> </li> </ul>';
                    }
                    $(".mg-more").before(result);
    
                    /*******************************************/
    
                    /*隐藏more按钮*/
                    if ((offset + size) >= sum) {
                        $("#showMore").text('已经没有更多的消息了');
                    } else {
                        $("#showMore").show();
                    }
                },
                error: function (xhr, type) {
                    alert('Ajax error!');
                }
            });
        }
  • 相关阅读:
    C 库函数 ------ qsort()
    递归之美
    C函数库 ------ ctype.h
    scanf 多行输入判断结束
    POSIX库、glibc库、pthreads库、libc库、newlib、uClibc
    Docker 私有仓库搭建
    在daemon.json中配置主机后无法启动docker
    MySQL配置HeartBeat实现心跳监控和浮动IP
    Heartbeat基础知识-运维小结
    (二) Docker中启动镜像
  • 原文地址:https://www.cnblogs.com/silences/p/6678305.html
Copyright © 2011-2022 走看看