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日

相关文章

  • 自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结

    自适应布局是指网页在不同的设备上(如PC、手机、平板等)都能够有良好的展示效果,其中最重要的一步就是设置meta标签中viewport属性。 viewport属性用于控制浏览器的显示区域,以及渲染出来的页面在其中的放大或缩小比例。下面分别讲解viewport属性中各个参数的含义: width:指定viewport的宽度,可以是一个整数或者字符串“device…

    css 2023年6月10日
    00
  • React.js入门学习第一篇

    当想要学习React.js时,第一步是了解React.js的基础知识。这篇文章是React.js入门学习的第一篇,介绍了React.js的基础知识,包括组件和虚拟DOM,以及如何构建一个简单的React组件。 React.js基础知识 组件 React.js的核心是组件,组件分为无状态组件和有状态组件两种。无状态组件只负责接收输入,做出相应的输出,不需要维护…

    css 2023年6月9日
    00
  • 如何使定义了高度和宽度的< a >里的文字垂直居中【实现代码】

    为使定义了高度和宽度的<a>里的文字垂直居中,我们可以使用flex布局来实现。 具体实现: 首先,用CSS样式给<a>元素设置宽度和高度,同时需要设置display:flex;、justify-content:center;和align-items:center;属性值,以实现水平和垂直居中。 a{ display:flex; jus…

    css 2023年6月10日
    00
  • asp.net后台如何动态添加JS文件和css文件的引用

    ASP.NET可以通过在页面上添加控件的形式来动态添加JS和CSS文件的引用。 添加JS文件引用 要在ASP.NET后台动态添加JS文件的引用,可以使用HtmlGenericControl类创建一个<script>元素并将其添加到页面中。 示例1:使用HtmlGenericControl类创建并添加<script>元素 // 获取Pa…

    css 2023年6月9日
    00
  • 使用Pinyin4j进行拼音分词的方法

    使用Pinyin4j进行拼音分词的方法可以分为以下步骤: 第一步:引入Pinyin4j依赖 在Maven项目中,需要在项目的pom.xml中添加以下依赖: <dependency> <groupId>com.belerweb</groupId> <artifactId>pinyin4j</artifact…

    css 2023年6月10日
    00
  • 简述CSS中的背景属性background

    请听我给你详细讲解“简述CSS中的背景属性background”的攻略。 一、背景属性background简介 在CSS中,使用background属性来设置一个元素的背景样式,该属性可以用于设置背景颜色、背景图片、背景重复、背景位置以及背景尺寸等,是开发中常用的样式之一。 具体语法如下: background: background-color backg…

    css 2023年6月10日
    00
  • CSS :visited伪类选择器隐秘往事回忆录

    当我们在网站中使用超链接时,通常会出现一种需求:为点击过的链接提供视觉上的不同样式,以帮助用户明确区分哪些页面已经访问过。 实现这个效果的一种方式就是使用CSS中的:visited伪类选择器。简单来说,:visited选择器可以帮助我们选中已被访问过的链接,以便我们能够对这些链接应用特定的样式。 下面是一份“CSS :visited伪类选择器隐秘往事回忆录”…

    css 2023年6月9日
    00
  • CSS计数器(序列数字字符自动递增)详解

    下面是关于CSS计数器的详细攻略。 什么是CSS计数器? CSS计数器是CSS3新增的一个特性,作用是用于自动生成序列、计数等,这些序列和计数可以用于列表、表格、图表、目录等等。CSS计数器有三个相关属性: counter-reset:重置计数器,用于规定要计数的元素和初始值; counter-increment:增量计数器,用于规定计数器每次自增的值; c…

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