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);
                        }
                    }
                });
            }
  • 相关阅读:
    linux常用命令
    linux下redis配置
    Git使用命令
    linux学习笔记
    NOPI读取Excel2003、Excel2007或更高级的兼容性问题
    netcore开发常用命令
    netcore3.0 dotnet ef执行报错
    vscode配置nuget常见问题
    PDMReader结合PowerDesigner导出word格式数据字典
    微信网页授权开发遇到问题
  • 原文地址:https://www.cnblogs.com/subendong/p/4387280.html
Copyright © 2011-2022 走看看