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,通过设置datatypejson来表示返回的数据格式为JSON格式。colNamescolModel分别用于定义表格的列名和列模型。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,通过设置processingserverSidetrue来表示开启服务器端分页。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技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 在Vue中使用CSS3实现内容无缝滚动的示例代码

    当我们需要在Vue中实现内容无缝滚动动效时,可以通过CSS3的animation、transform等属性以及Vue的v-for指令进行实现。以下是详细的攻略过程: 步骤一:在Vue中创建一个列表数据 首先,我们需要在Vue实例中创建一个包含多个数据的列表,用于展示在页面中滚动的内容。这个列表有多种创建方式,这里介绍两个示例: 通过 data 属性创建 &l…

    css 2023年6月10日
    00
  • CSS弹性布局FLEX,媒体查询及移动端点击事件的实现

    下面是详细讲解“CSS弹性布局FLEX,媒体查询及移动端点击事件的实现”的完整攻略。 CSS弹性布局FLEX CSS弹性布局FLEX是一种基于盒子模型的布局方式,它可以轻松地实现响应式设计。使用FLEX布局,我们可以灵活地控制容器中元素的排列方式,包括水平方向排列、垂直方向排列、换行等。 语法 使用FLEX布局,需要将容器的 display 属性设置为 fl…

    css 2023年6月10日
    00
  • 深入挖掘Windows脚本技术

    深入挖掘Windows脚本技术攻略 背景介绍 Windows脚本技术是一项非常重要的技能,可以用于进行Windows管理任务和自动化,包括管理操作系统、配置网络和管理安全等方面。在本攻略中,我们将深入探讨Windows脚本技术的核心内容,并提供一些示例来帮助您掌握这些技能。 基础知识 在开始深入挖掘Windows脚本技术之前,需要掌握一些基本技能,如: Wi…

    css 2023年6月10日
    00
  • 详解Sticky Footer 绝对底部的两种套路

    下面是详解Sticky Footer 绝对底部的两种套路的完整攻略。 一、Sticky Footer的概念 在网页设计中,Sticky Footer指的是网页底部一直贴在视口底部,并且在网页内容过短时也不会出现在视口中的一种解决方案。此外,Sticky Footer还需要保证在网页内容过长时,能够让滚动条正常滚动,即不会被遮挡。 二、套路一:用flex实现 …

    css 2023年6月10日
    00
  • VSCODE怎么安装CSS Peek插件快速查看CSS定义?

    VSCODE怎么安装CSS Peek插件快速查看CSS定义? 在前端开发中,经常需要查看CSS样式定义,但是在大型项目中,CSS文件可能会非常庞大,查找起来非常麻烦。为了提高开发效率,可以使用VSCode的CSS Peek插件来快速查看CSS定义。本攻略将详细讲解VSCODE怎么安装CSS Peek插件快速查看CSS定义,包括插件安装、使用方法和示例说明。 …

    css 2023年5月18日
    00
  • WebView的介绍与简单实现Android和H5互调的方法

    介绍: WebView是Andorid中提供的一种视图控件,它可以在应用中嵌入一个浏览器控件,并且可以开发者可以通过它来嵌套H5页面或者加载本地html文件,整合了nativ和webview,并且可以通过简单的代码实现两者之间的通信交互。在移动端中,WebView所扮演的作用非常重要,可以作为应用的嵌套控件,也可以用来作为轻量级的信息展示器。下面我们针对该控…

    css 2023年6月10日
    00
  • CSS网页布局入门教程11:带当前标识的标签式横向导航图片美化版

    这里是“CSS网页布局入门教程11:带当前标识的标签式横向导航图片美化版”的完整攻略。 介绍 这篇教程将会告诉你如何通过CSS样式来创建带有当前标识的标签式横向导航图片美化版。这个导航栏将会基于横向的无序列表,并且会用到一些有趣的CSS特效来实现。在这个教程中,我们将详细介绍CSS样式,并且会有两个示例提供帮助。 步骤 第1步:HTML结构 首先,我们需要创…

    css 2023年6月11日
    00
  • jQuery动画效果图片轮播特效

    针对“jQuery动画效果图片轮播特效”,我来给你详细讲解一下完整攻略。 1. 确定HTML结构 首先,我们需要确定图片轮播的HTML结构。一般来说,轮播图应该包含一个容器(wrapper),一个图片列表(list),以及一个导航(navigation)。 <div class="wrapper"> <ul class=…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部