Jquery load more 分页方式

最新推荐文章于 2023-03-07 10:34:53 发布

@朱较瘦

最新推荐文章于 2023-03-07 10:34:53 发布

阅读量1.7k

点赞数

分类专栏： Jquery and Jquery plug-in

本文链接：https://blog.csdn.net/zhulongxi/article/details/51440063

版权

Jquery and Jquery plug-in 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

http://www.cnblogs.com/rush/p/3397761.html

1.html 页面：

<head runat="server">
    <title></title>
    <script src="scripts/jquery-1.9.1.min.js"></script>
    <link href="loadmore.style.css" rel="stylesheet" />
    <script src="scripts/myloadmore.js"></script>
    <script>
        $(".animation_image").loadMore();
    </script>
</head>
<body>
    <form>
    <div>
        <ul id="result">
        </ul>
        <div class="animation_image" style="text-align:center">
            <img src="images/ajax-loader.gif" alt="load more" />
        </div>
    </div>
        </form>
</body>

2.myloadmore.js文件：

(function ($) {
    $.fn.loadMore = function () {
        'use strict';
        var trackLoad = { pageIndex: 1, loading: false };//第几页
        var pageCount = 50;//共多少页--从hard code中获取

        //鼠标滚动到底显示更多
        $(window).scroll(function () {
            if ($(window).scrollTop() + $(window).height() == $(document).height()) {
                if (trackLoad.pageIndex <= pageCount && !trackLoad.loading) {
                    trackLoad.loading = true;
                    $(".animation_image").show();
                    $.GetData(trackLoad);
                }
            }
        });
        //一进来就加载第一页
        $.GetData(trackLoad);
    };

    //设置对象loadMore的默认值
    $.fn.loadMore.default = {
        url: "GetPagedData.ashx",
        pageIndex: 1,
        loading: false
    };

    $.GetData = function (options) {
        var opts = $.extend(true, {}, $.fn.loadMore.default, options);

        $.ajax({
            url: opts.url,
            type: "POST",
            dataType: "JSON",
            data: {pageIndex:opts.pageIndex},
            success: function (data) {
                if (data != null && data != undefined && data != "") {
                    var obj = eval(data);
                    $(obj).each(function (i, e) {
                        $("#result").append('<li id="">' +
                        this.Id + ' - ' + '<strong>' +
                        this.Name + '</strong>' + ' — ' + '<span class="page_message">' +
                        this.Comment + '</span></li>');
                    });
                    $(".animation_image").hide();
                    options.pageIndex++;
                    options.loading = false;
                }
            },
            error: function (xmlHttpRequest,textStatus,errorThrown) {
                options.loading = true;
                console.log(errorThrown.toString());
            }
        });

    };
    //$.fn.loadMore();
})(jQuery);

3.loadmore.style.css文件：

@import url("reset.css");
body,td,th {font-family: 'Microsoft Yahei', Georgia, Times New Roman, Times, serif;font-size: 15px;}
.animation_image {background: #F9FFFF;border: 1px solid #E1FFFF;padding: 10px;width: 500px;margin-right: auto;margin-left: auto;}
#result{width: 500px;margin-right: auto;margin-left: auto;}
#result ol{margin: 0px;padding: 0px;}
#result li{margin-top: 20px;border-top: 1px dotted #E1FFFF;padding-top: 20px;}

4.后台GetPagedData.ashx:

 public void ProcessRequest(HttpContext context)
        {
            //context.Response.ContentType = "text/json";
            int pageIndex = Convert.ToInt32(context.Request["pageIndex"]);
            string jsonStr = GetMessage(pageIndex);
            context.Response.Write(jsonStr);
        }


        private string GetMessage(int pageIndex)
        {
            int pageSize = 10;
            StringBuilder sb = new StringBuilder();
            sb.Append(@"with Results_CTE AS(select ID, Name, Message, ROW_NUMBER() OVER(ORDER BY id) AS RowNum 
                from T_Paginate With(NOLOCK))");
            sb.Append(string.Format("select * from Results_CTE WHERE RowNum between {0} and {1}",(pageIndex-1)*pageSize+1,pageIndex*pageSize));
            List<Message> messageList = new List<Message>();

            string connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ToString();
            using (SqlConnection conn = new SqlConnection(connStr))
            {
                using (SqlCommand cmd = new SqlCommand(sb.ToString(), conn))
                {
                    conn.Open();
                    using (SqlDataReader reader = cmd.ExecuteReader(System.Data.CommandBehavior.CloseConnection))
                    {
                        while (reader.Read())
                        {
                            var message = new Message
                            {
                                Id = (int)reader["ID"],
                                Name = reader["Name"].ToString(),
                                Comment = reader["Message"].ToString()

                            };
                            messageList.Add(message);
                        }
                    }
                }
                    
            }
            return new JavaScriptSerializer().Serialize(messageList);
        }