超好用轻量级MVC分页控件JPager.Net

JPager.Net是一款轻量级MVC分页控件，它可以帮助我们轻松地实现数据分页功能。以下是使用JPager.Net的攻略：

安装

JPager.Net可以通过NuGet安装。在Visual Studio中选择“工具”->“NuGet包管理器”->“程序包管理器控制台”，在控制台中输入以下命令进行安装：

Install-Package JPager.Net

使用

1. 在MVC View页面中引入JPager.Net的css和js文件

<link href="@Url.Content("~/Content/JPagerNet/themes/default/jpager.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-3.6.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/JPagerNet/jpager.js")" type="text/javascript"></script>

1. 在MVC Controller中获取数据并返回给View页面

例如，获取Student表中的数据并将数据传递到View页面：

public ActionResult Index(int? page)
{
    int currentPage = page ?? 1;
    int pageSize = 10;

    var students = db.Students.OrderBy(s => s.Id).Skip((currentPage - 1) * pageSize).Take(pageSize).ToList();
    int totalCount = db.Students.Count();

    ViewBag.Pager = new Pager(totalCount, currentPage, pageSize);

    return View(students);
}

其中Pager是JPager.Net的核心，它可以计算出总页数，并生成分页链接。

1. 在MVC View页面中使用JPager.Net的分页链接

在View页面中，我们可以使用Pager的GetPageLink方法来生成分页链接。例如：

@Html.Raw(ViewBag.Pager.GetPageLink(3, "第3页", new { @class = "custom_page_link" }))

以上代码将生成第3页的分页链接，并指定样式为custom_page_link。

通过以上步骤，我们就可以轻松地使用JPager.Net实现数据的分页功能。

示例

下面是两个使用JPager.Net的示例：

示例1

获取Student表中的数据，并在View页面中显示分页链接和数据列表。

以下是Controller中的代码：

public ActionResult Index(int? page)
{
    int currentPage = page ?? 1;
    int pageSize = 10;

    var students = db.Students.OrderBy(s => s.Id).Skip((currentPage - 1) * pageSize).Take(pageSize).ToList();
    int totalCount = db.Students.Count();

    ViewBag.Pager = new Pager(totalCount, currentPage, pageSize);

    return View(students);
}

以下是View页面中的代码：

@model List<Student>

<link href="@Url.Content("~/Content/JPagerNet/themes/default/jpager.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-3.6.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/JPagerNet/jpager.js")" type="text/javascript"></script>

<div>
    @foreach (var student in Model)
    {
        <div>@student.Name - @student.Age</div>
    }
</div>

<div>
    @Html.Raw(ViewBag.Pager.GetPageLink(1, "首页", new { @class = "custom_page_link" })) 
    @Html.Raw(ViewBag.Pager.GetPageLink(ViewBag.Pager.CurrentPage - 1, "上一页", new { @class = "custom_page_link" }))
    @foreach (var index in ViewBag.Pager.PagesToShow)
    {
        if (index == ViewBag.Pager.CurrentPage)
        {
            <b>@index</b>
        }
        else
        {
            @Html.Raw(ViewBag.Pager.GetPageLink(index, index.ToString(), new { @class = "custom_page_link" }))
        }
    }
    @Html.Raw(ViewBag.Pager.GetPageLink(ViewBag.Pager.CurrentPage + 1, "下一页", new { @class = "custom_page_link" }))

    @Html.Raw(ViewBag.Pager.GetPageLink(ViewBag.Pager.TotalPages, "末页", new { @class = "custom_page_link" }))
</div>

示例2

使用Ajax获取JSON格式的数据，并使用JPager.Net实现分页功能。

以下是Controller中的代码：

public JsonResult GetData(int? page)
{
    int currentPage = page ?? 1;
    int pageSize = 10;

    var students = db.Students.OrderBy(s => s.Id).Skip((currentPage - 1) * pageSize).Take(pageSize).ToList();
    int totalCount = db.Students.Count();

    JObject json = new JObject();

    json["TotalCount"] = totalCount;

    JArray items = new JArray();

    foreach (var student in students)
    {
        JObject item = new JObject();
        item["Name"] = student.Name;
        item["Age"] = student.Age;

        items.Add(item);
    }

    json["Items"] = items;

    return Json(json, JsonRequestBehavior.AllowGet);
}

以下是View页面中的代码：

<div id="data-container"></div>

<div id="pager-container"></div>

<script>

$(document).ready(function () {

    var currentPage = 1;

    function loadData() {
        $.ajax({
            url: '/Home/GetData',
            data: { page: currentPage },
            success: function (data) {
                var html = '';

                $.each(data.Items, function (index, item) {
                    html += '<div>' + item.Name + ' - ' + item.Age + '</div>';
                });

                $('#data-container').html(html);

                $('#pager-container').html('');
                $('#pager-container').jPager({
                    totalCount: data.TotalCount,
                    pageSize: 10,
                    onPageChanged: function (pageIndex) {
                        currentPage = pageIndex;
                        loadData();
                        return false;
                    }
                });
            },
        });
    }

    loadData();

});

</script>

<link href="@Url.Content("~/Content/JPagerNet/themes/default/jpager.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-3.6.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/JPagerNet/jpager.js")" type="text/javascript"></script>

通过以上示例，我们可以看到JPager.Net的灵活性和易用性，可以帮助我们轻松地实现数据分页功能。