下面是“ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项”的攻略:
1. 准备工作
首先,需要确保已经安装好了以下环境:
- .NET Framework 4.0及以上版本
- Visual Studio 2012及以上版本
- ASP.NET MVC 4.0及以上版本
- Entity Framework 6.0及以上版本
- jqGrid插件或jquery Datatables插件
在完成以上环境的安装后,需要在项目中添加相关的引用,如下所示:
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-cn.js"></script>
<script src="~/Scripts/datatables.min.js"></script>
<link href="~/Content/datatables.min.css" rel="stylesheet" />
2. 使用jqGrid进行服务器端分页
首先,需要在页面中定义一个div,用于渲染jqGrid表格。如下所示:
<div id="grid"></div>
然后,在页面中编写相关的JavaScript代码来初始化jqGrid表格,并进行服务器端分页。示例代码如下:
$(document).ready(function () {
$("#grid").jqGrid({
url: '/Home/GridData',
datatype: 'json',
mtype: 'GET',
colNames: ['ID', '名称', '地址'],
colModel: [
{ name: 'ID', index: 'ID', width: 30 },
{ name: 'Name', index: 'Name', width: 120 },
{ name: 'Address', index: 'Address', width: 200 }
],
pager: '#gridPager',
rowNum: 20,
height: 'auto',
autowidth: true,
rownumbers: true,
rowList: [20, 30, 50],
viewrecords: true,
caption: '示例表格',
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
repeatitems: false,
id: '0'
}
});
$("#grid").jqGrid('navGrid', '#gridPager', { edit: false, add: false, del: false, search: false, refresh: true });
});
在以上代码中,我们将jqGrid表格的数据源定义为/Home/GridData
,通过设置datatype
为json
来表示返回的数据格式为JSON格式。colNames
和colModel
分别用于定义表格的列名和列模型。pager
用于指定分页的位置,rowNum
用于指定每页显示的行数,rownumbers
用于显示行号,rowList
用于定义每页显示行数的下拉列表,viewrecords
表示是否显示总记录数,caption
用于设置标题,jsonReader
用于指定JSON格式的字段名和数据格式。最后,navGrid
用于显示分页导航栏。
需要在后台编写代码来处理分页请求。在Controller中编写如下代码:
public JsonResult GridData(int page = 1, int rows = 10)
{
var list = db.TestTable.ToList();
int count = list.Count();
int totalPages = (int)Math.Ceiling((double)count / (double)rows);
list = list.OrderBy(a => a.ID).Skip((page - 1) * rows).Take(rows).ToList();
var jsonData = new
{
total = totalPages,
page,
records = count,
rows = list.Select(a => new
{
id = a.ID,
cell = new object[] {
a.ID,
a.Name,
a.Address
}
}).ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
在以上代码中,我们首先获取所有的数据,然后计算出总页数,并根据当前页和每页行数来获取当前页需要显示的数据,最后将数据组装为JSON格式,通过JsonResult返回到前台。
3. 使用jquery Datatables进行服务器端分页
首先,需要在页面中定义一个table,用于渲染jquery Datatables表格。如下所示:
<table id="tableData" class="display table" style="width: 100%">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>地址</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>名称</th>
<th>地址</th>
</tr>
</tfoot>
</table>
然后,在页面中编写相关的JavaScript代码来初始化jquery Datatables表格,并进行服务器端分页。示例代码如下:
$(document).ready(function () {
$("#tableData").DataTable({
processing: true,
serverSide: true,
ajax: {
url: '/Home/GetData',
type: 'POST',
dataType: 'json',
data: function (d) {
d.page = $('#tableData').DataTable().page.info().page + 1;
d.rows = $('#tableData').DataTable().page.info().length;
}
},
columns: [
{ data: 'ID' },
{ data: 'Name' },
{ data: 'Address' }
],
paging: true,
pagingType: 'full_numbers',
pageLength: 20,
lengthMenu: [[20, 30, 50], [20, 30, 50]],
ordering: false,
searching: false,
info: true,
language: {
'lengthMenu': '每页显示 _MENU_ 条记录',
'paginate': {
'first': '首页',
'last': '末页',
'next': '<i class="iconfont icon-arrowright"></i>',
'previous': '<i class="iconfont icon-arrowleft"></i>'
},
'info': '共_TOTAL_条记录,当前显示第_START_到第_END_条'
}
});
});
在以上代码中,我们将jquery Datatables表格的数据源定义为/Home/GetData
,通过设置processing
和serverSide
为true
来表示开启服务器端分页。ajax
用于配置服务端获取数据的方式,data
用于传递分页所需的参数。columns
用于定义表格的列名和列模型。pagingType
用于设置分页样式,pageLength
用于设置每页显示的行数,lengthMenu
用于定义每页显示行数的下拉列表,ordering
用于设置是否可以排序,searching
表示是否可以进行搜索,info
用于显示总记录数和分页信息,language
用于设置表格的语言。
需要在后台编写代码来处理分页请求。在Controller中编写如下代码:
public JsonResult GetData(int draw, int start, int length)
{
var list = db.TestTable.ToList();
int count = list.Count();
var data = list.Skip(start).Take(length).ToList();
return Json(new { draw = draw, recordsTotal = count, recordsFiltered = count, data = data }, JsonRequestBehavior.AllowGet);
}
在以上代码中,我们获取所有的数据,并根据分页所需的参数来获取当前页需要显示的数据,最后将数据组装为JSON格式,通过JsonResult返回到前台。
总结
以上就是使用ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项的攻略,通过以上示例代码,我们可以很清楚地了解如何使用这两个插件进行服务器端分页。需要注意的是,由于jqGrid已经停止更新,因此建议使用jquery Datatables插件来进行表格的展示和分页。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项 - Python技术站