js 滚动加载数据
最近做了下滚动加载数据,整理了代码,公布出来,希望对有需求的人有帮助。
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>

浙公网安备 33010602011771号