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

Show more data on click using mvc and jquery?

本文关键字：多点 数据 显示 mvc jquery 使用      更新时间：2023-09-26

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

当页面第一次加载时，它将需要500个数据，但只显示100个数据，当用户点击按钮时，它会显示下一个100，依此类推

我的mvc 4 项目

下面的示例一次显示3个项目。如果您想将其更改为另一个值，例如100，只需将视图中的pageSize变量设置为所需值即可。我希望下面的例子能帮助你，请记住标记为已回答：

控制器：

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" />
相关文章：