JPager.Net是一款轻量级MVC分页控件,它可以帮助我们轻松地实现数据分页功能。以下是使用JPager.Net的攻略:
安装
JPager.Net可以通过NuGet安装。在Visual Studio中选择“工具”->“NuGet包管理器”->“程序包管理器控制台”,在控制台中输入以下命令进行安装:
Install-Package JPager.Net
使用
- 在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>
- 在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的核心,它可以计算出总页数,并生成分页链接。
- 在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的灵活性和易用性,可以帮助我们轻松地实现数据分页功能。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:超好用轻量级MVC分页控件JPager.Net - Python技术站