ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项-前端开发

下面是“ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项”的攻略：

下面是“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插件来进行表格的展示和分页。