0
我有沒有分頁的500頁數據列表,我想使用滾動或按鈕點擊顯示加載數據在同一頁面上沒有回傳。使用mvc和jquery顯示更多點擊數據?
當頁面首次加載時,將需要500個數據,但只顯示100個數據,當用戶點擊按鈕時,它會顯示下一個100等等。
我對MVC 4
我有沒有分頁的500頁數據列表,我想使用滾動或按鈕點擊顯示加載數據在同一頁面上沒有回傳。使用mvc和jquery顯示更多點擊數據?
當頁面首次加載時,將需要500個數據,但只顯示100個數據,當用戶點擊按鈕時,它會顯示下一個100等等。
我對MVC 4
項目下圖顯示的例子3項在時間。如果你想將其更改爲另一個值如100只設置pageSize
變量視圖所需value.I希望下面的例子可以幫助你,請記得要標記爲回答:
控制器:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult GetAlotOfUsers()
{
var employees = new List<object>();
employees.Add(new { Name = "Name 1", Surname = "Surname 1" });
employees.Add(new { Name = "Name 2", Surname = "Surname 2" });
employees.Add(new { Name = "Name 3", Surname = "Surname 3" });
employees.Add(new { Name = "Name 4", Surname = "Surname 4" });
employees.Add(new { Name = "Name 5", Surname = "Surname 5" });
employees.Add(new { Name = "Name 6", Surname = "Surname 6" });
employees.Add(new { Name = "Name 7", Surname = "Surname 7" });
employees.Add(new { Name = "Name 8", Surname = "Surname 8" });
employees.Add(new { Name = "Name 9", Surname = "Surname 9" });
employees.Add(new { Name = "Name 10", Surname = "Surname 10" });
return Json(employees, JsonRequestBehavior.AllowGet);
}
}
查看:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var employees = null;
var page = 1;
var pageSize = 3;
$("#getEmployees").click(function() {
$("#results").empty();
$.getJSON("/Home/GetAlotOfUsers", function (data) {
employees = data;
for (var i = 0; i < employees.length; i++) {
if (i < pageSize) {
$("#results").append("<div>" + employees[i].Name + " " + employees[i].Surname + "</div>");
}
else
break;
}
});
});
$("#previous").click(function() {
if (employees != null && page > 1) {
$("#results").empty();
for (var i = ((page - 2) * pageSize) ; i < employees.length; i++) {
if (i < ((page - 1) * pageSize)) {
$("#results").append("<div>" + employees[i].Name + " " + employees[i].Surname + "</div>");
}
}
page--;
}
});
$("#next").click(function() {
if (employees != null && (page * pageSize) < employees.length) {
$("#results").empty();
for (var i = 0; i < employees.length; i++) {
if (i >= (page * pageSize) && i < ((page + 1) * pageSize)) {
$("#results").append("<div>" + employees[i].Name + " " + employees[i].Surname + "</div>");
}
}
page++;
}
});
})
</script>
<input type="button" value="GetEmployees" id="getEmployees" />
<div id="results">
</div>
<input type="button" id="previous" value="Previous" />
<input type="button" id="next" value="Next" />
請參閱 http://stackoverflow.com/questions/20041940/load-data-only-when-page-is-scrolled-down-mvc-4-jquery-mobile –