最近做了下滚动加载数据,整理了代码,公布出来,希望对有需求的人有帮助。public ActionResult About() { var list = new List<UserInfo>(); for (int i = 1; i <= ...
最近做了下滚动加载数据,整理了代码,公布出来,希望对有需求的人有帮助。
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(get='_blank'>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>
原标题:js 滚动加载数据
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。