jquery滚动加载数据

最近做了下滚动加载数据,整理了代码,公布出来,希望对有需求的人有帮助。

public ActionResult About()
        {

            var list = new List<UserInfo>();
            for (int i = 1; i <= 1000; i++)
            {
                list.Add(new UserInfo()
                {
                    ID=i,
                    Name="xxxxxx",
                    Name1 = "xxxxxx",
                    Name2 = "xxxxxx",
                    Name3 = "xxxxxx",
                    Name4 = "xxxxxx",
                });
            }


            return View(list);
        }

        [HttpPost]
        public ActionResult AddUser(int id)
        {
            var list = new List<UserInfo>();
            var temp = id + 100;
            var tb = "<td>{0}</td>";
            StringBuilder sb = new StringBuilder();
            for (int i = id; i < temp; i++)
            {
                sb.Append("<tr>");
                sb.Append(string.Format(tb,i));
                sb.Append(string.Format(tb, "xxxxxx"));
                sb.Append(string.Format(tb, "xxxxxx"));
                sb.Append(string.Format(tb, "xxxxxx"));
                sb.Append(string.Format(tb, "xxxxxx"));
                sb.Append(string.Format(tb, "xxxxxx"));
                sb.Append("</tr>");
            }
            return Content(sb.ToString());
        }

<div id="box1">
    <table id="container">
        @foreach (var item in list)
        {
            <tr>
                <td>@item.ID</td>
                <td>@item.Name</td>
                <td>@item.Name1</td>
                <td>@item.Name2</td>
                <td>@item.Name3</td>
                <td>@item.Name4</td>
            </tr>
        }
    </table>
</div>

<script type="text/javascript">
    $(document).ready(function () {

        $("#box1").scroll(function () {
            var viewH = $(this).height();//可见高度
            var contentH = $(this).get(0).scrollHeight;//内容高度
            var scrollTop = $(this).scrollTop();//滚动高度
            var count = $("#container tr").length;
            if (contentH - viewH - scrollTop<=100) {
                
                $.ajax({
                    url: "/Home/AddUser?id=" + count,
                    type: "POST",
                    success: function (data) {
                        $("#container").append(data);
                    }
                });
            }
        });

    })

</script>

 

posted @ 2015-11-10 13:36  丰叔(◕ˇ◞◟ˇ◕)  阅读(92)  评论(0)    收藏  举报