zoukankan      html  css  js  c++  java
  • 鼠标滚动,自动加载数据

    一、手动点击加载:

        <div class="coursecontent clearfix" id="divContent">
        </div>
        <input type="button" value="next" onclick="getPage(false)" />
            @*$(document).ready(function () {
                getPage(true);
            });
    
            //******************************************************分页用到 开始
            var limit = 10;
            var offset = 0;
            var order = "createdate";
            var isAsc = false;
    
            function getPage(isFirst) {
                if (isFirst) {
                    limit = 10;
                    offset = 0;
                }
                else {
                    offset += limit;
                }
                $.get("@Url.Action("List", "Library")", { limit: limit, offset: offset, order: order, isAsc: isAsc },
                function (data) {
                    if (isFirst) {
                        $("#divContent").html(data);
                    }
                    else {
                        $("#divContent").append(data);
                    }
                });
            }
            //******************************************************分页用到 结束*@

     二、自动加载:

    <div class="coursecontent clearfix" id="divContent">
        </div>
            var limit = 50;
            var offset = 0;
            var order = "createdate";
            var isAsc = false;
    
            $(document).ready(function () {
                //第一次加载
                loadMore(true);
    
                //滚动时加载
                $(window).scroll(function () {
                    //当滚动到最底部以上1像素时,加载新内容
                    if ($(document).height() - $(this).scrollTop() - $(this).height() < 1) {
                        loadMore(false);
                    }
                });
            });
    
            function loadMore(isFirst) {
    
                if (isFirst) {
                    offset = 0;
                }
                else {
                    offset += limit;
                }
    
                $.ajax({
                    url: '/library/list',
                    method: "get",
                    dataType: 'text',
                    data: { limit: limit, offset: offset, order: order, isAsc: isAsc },
                    success: function (data) {
                        if (isFirst) {
                            $("#divContent").html(data);
                        }
                        else {
                            $("#divContent").append(data);
                        }
                    }
                });
            }
  • 相关阅读:
    解决GOOGLE不能用的办法
    Elmah错误日志工具
    Linq 更改主键值
    qcow2、raw、vmdk等镜像格式
    Ceph相关博客、网站(256篇OpenStack博客)
    Delphi中inherited问题
    Qt qss一些伪装态,以及margin与padding区别
    Qt双缓冲机制:实现一个简单的绘图工具(纯代码实现)
    写出一篇好博文需要用到的工具
    最短路径启蒙题
  • 原文地址:https://www.cnblogs.com/subendong/p/4387280.html
Copyright © 2011-2022 走看看