使用mvc和jquery显示更多点击数据？

Question

我有没有分页的500页数据列表，我想使用滚动或按钮点击显示加载数据在同一页面上没有回传。

当页面首次加载时，将需要500个数据，但只显示100个数据，当用户点击按钮时，它会显示下一个100等等。

我对MVC 4

Answer 1

项目下图显示的例子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" />