ASP.NET MVC与EF是常用的Web开发框架，结合jqGrid和jquery Datatables可实现良好的服务端分页效果。以下是ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项的详细攻略：
注意事项
1. 安装jqGrid和jquery Datatables插件
必须先将jqGrid和jquery Datatables插件进行安装，可以从官方网站上下载到最新版本。其中，jqGrid可以通过NuGet包管理器安装。
2. 在Controller中实现服务端分页
在Controller中实现服务端分页需要明确分页的参数，包括当前页码，每页显示数量，以及分页排序方式等。在使用EF进行数据查询时，需要使用Take()和Skip()方法对数据进行分页。示例代码如下：
public ActionResult JqGrid(int page = 1, int rows = 10, string sort = "ID", string order = "asc")
{
var context = new DemoDbContext();
var list = context.DemoTable.ToList();
int totalRecord = list.Count();
var result = list.OrderBy(sort + " " + order)
.Skip((page - 1) * rows)
.Take(rows);
var data = new
{
total = (totalRecord + rows - 1) / rows,
page = page,
records = totalRecord,
rows = result
};
return Json(data, JsonRequestBehavior.AllowGet);
}
其中，DemoDbContext为EF的上下文，DemoTable为数据表，可根据实际情况进行修改。
3. 在View中使用jqGrid和jquery Datatables
分别引入jqGrid和jquery Datatables插件的js和css文件，并通过使用$("#gridTable").jqGrid({})或$("#example").DataTable({})的方式初始化表格，在初始化参数中指定表格的URL地址、分页参数等。示例代码如下：
- 使用jqGrid
<table id="gridTable"></table>
<div id="gridPager"></div>
<script type="text/javascript">
$(function () {
$("#gridTable").jqGrid({
url: '@Url.Action("JqGrid", "Home")',
datatype: 'json',
sortname: 'ID',
sortorder: 'asc',
mtype: 'GET',
pager: '#gridPager',
rowNum: 10,
rowList: [10, 20, 30],
height: '100%',
autowidth: true,
viewrecords: true,
altRows: true,
});
});
</script>
- 使用jquery Datatables
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Address</th>
<th>Phone</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$(function () {
$('#example').DataTable({
"ajax": "@Url.Action("DataTable", "Home")",
"columns": [
{ "data": "ID" },
{ "data": "Name" },
{ "data": "Age" },
{ "data": "Sex" },
{ "data": "Address" },
{ "data": "Phone" }
],
"paging": true,
"pageLength": 10
});
});
</script>
示例说明
示例1：使用jqGrid
以下示例展示了如何使用jqGrid实现服务端分页。在本示例中，将从数据库中读取示例数据，包括ID、名称、年龄、性别、地址和电话等信息，并通过jqGrid将数据呈现在前端页面上。
- 在Controller中实现服务端分页
public ActionResult JqGrid(int page = 1, int rows = 10, string sort = "ID", string order = "asc")
{
var context = new DemoDbContext();
var list = context.Details.ToList();
int totalRecord = list.Count();
var result = list.OrderBy(sort + " " + order)
.Skip((page - 1) * rows)
.Take(rows);
var data = new
{
total = (totalRecord + rows - 1) / rows,
page = page,
records = totalRecord,
rows = result
};
return Json(data, JsonRequestBehavior.AllowGet);
}
- 在View中使用jqGrid
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
@section Scripts{
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid-bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.jqGrid.js"></script>
<script type="text/javascript">
$(function () {
$("#jqGrid").jqGrid({
url: '@Url.Action("JqGrid", "Home")',
datatype: 'json',
colNames: ['ID', 'Name', 'Age', 'Sex', 'Address', 'Phone'],
colModel: [
{ name: 'ID', index: 'ID', width: 100, align: 'center', sorttype: 'int' },
{ name: 'Name', index: 'Name', width: 100, align: 'center' },
{ name: 'Age', index: 'Age', width: 80, align: 'center', sorttype: 'int' },
{ name: 'Sex', index: 'Sex', width: 60, align: 'center', formatter: 'text' },
{ name: 'Address', index: 'Address', width: 200, align: 'center', formatter: 'text' },
{ name: 'Phone', index: 'Phone', width: 120, align: 'center', formatter: 'text' },
],
pager: '#jqGridPager',
rowNum: 10,
rowList: [10, 20, 30],
height: '100%',
autowidth: true,
viewrecords: true,
altRows: true,
});
});
</script>
}
示例2：使用jquery Datatables
以下示例展示了如何使用jquery Datatables实现服务端分页。在本示例中，将从数据库中读取示例数据，包括ID、名称、年龄、性别、地址和电话等信息，并通过jquery Datatables将数据呈现在前端页面上。
- 在Controller中实现服务端分页
public ActionResult DataTable()
{
var data = new
{
data = GetDetails()
};
return Json(data, JsonRequestBehavior.AllowGet);
}
private List<object[]> GetDetails(int page = 1, int length = 10, string field = "ID", string order = "asc")
{
var context = new DemoDbContext();
var list = context.Details.OrderBy($"{field} {order}").Skip((page - 1) * length).Take(length).ToList();
var result = new List<object[]>();
foreach (var detail in list)
{
result.Add(new object[] { detail.ID, detail.Name, detail.Age, detail.Sex, detail.Address, detail.Phone });
}
return result;
}
- 在View中使用jquery Datatables
<table id="detailTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Address</th>
<th>Phone</th>
</tr>
</thead>
</table>
@section Scripts{
<link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(function () {
$('#detailTable').DataTable({
"bServerSide": true,
"sAjaxSource": '@Url.Action("DataTable", "Home")',
"sServerMethod": "POST",
"bProcessing": true,
"bPaginate": true,
"bFilter": false,
"bSort": true,
"bAutoWidth": true,
"iDisplayLength": 10,
"aaSorting": [[0, 'asc']],
"aoColumns": [
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true }
]
});
});
</script>
}
结语
以上就是ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项的详细攻略以及两个示例说明，可以根据实际情况进行修改和使用，期望对你有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项 - Python技术站
微信扫一扫 
支付宝扫一扫 