1. Python技术站首页
  2. other

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

• other

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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月27日
下一篇 2023年6月27日

相关文章

  • Python批量修改文件后缀的方法

    Python批量修改文件后缀的方法攻略 在Python中，我们可以使用os模块和字符串操作来批量修改文件的后缀。下面是一个完整的攻略，包含了两个示例说明。 步骤1：导入必要的模块 首先，我们需要导入os模块来处理文件操作。使用以下代码导入模块： import os 步骤2：获取文件列表 接下来，我们需要获取要修改后缀的文件列表。可以使用os.listdir(…

    other 2023年8月5日
    00

  • native.js获取手机硬件基本信息实例代码android版

    Native.js获取手机硬件基本信息实例代码（Android版）攻略 1. 简介 Native.js是一个用于在移动应用中访问原生功能的JavaScript库。它提供了一种简单的方式来获取手机硬件的基本信息，如设备型号、操作系统版本等。本攻略将详细介绍如何使用Native.js在Android应用中获取手机硬件基本信息。 2. 准备工作 在开始之前，确保你…

    other 2023年8月1日
    00

  • JetBrains出品一款好用到爆的DataGrip数据库工具使用入门

    很抱歉，我无法提供有关JetBrains DataGrip数据库工具的详细攻略，因为我无法访问互联网或提供特定软件的使用指南。建议你查阅官方文档或在线教程，以获取有关DataGrip的详细信息和使用指南。官方文档通常提供了入门指南、示例和常见问题解答，可以帮助你更好地了解和使用DataGrip。

    other 2023年8月15日
    00

  • iOS9.3.2固件下载 苹果iOS9.3.2正式版固件下载地址大全

    iOS 9.3.2固件下载攻略 苹果iOS 9.3.2是一款重要的操作系统版本，它带来了一些新功能和修复了一些问题。如果你想下载并安装iOS 9.3.2固件，下面是一个详细的攻略，包含了下载地址和示例说明。 步骤一：备份设备 在开始下载和安装iOS 9.3.2固件之前，强烈建议你先备份你的设备。这样可以确保你的数据在升级过程中不会丢失。你可以通过iTunes…

    other 2023年8月4日
    00

  • python调用fortran模块

    Python调用Fortran模块的完整攻略一般步骤如下： 编写Fortran代码并将其编译成共享库(.so或.dll文件)。 在Python中使用ctypes模块加载Fortran共享库。 使用ctypes模块调用Fortran共享库中的函数。 以下是两个Python调用Fortran模块的示例： 示例1： Fortran代码： ! example.f90…

    other 2023年6月27日
    00

  • JavaScript ES6中CLASS的使用详解

    我将详细讲解“JavaScript ES6中CLASS的使用详解”的完整攻略，内容包括：什么是类，类的定义及语法，类的继承，实例化对象，类的静态方法和属性。 一、什么是类 类（class）是一种面向对象编程（OOP）的概念，它是一种用来描述对象特征的用户自定义类型。JavaScript一直以来都是支持面向对象编程的，但是在ES6之前，它的实现方式都是基于构造…

    other 2023年6月27日
    00

  • js的三种继承方式详解

    下面我将详细讲解 JavaScript 的三种继承方式。 1. 原型继承 原型继承是 JavaScript 中最基本的继承方式，它实现的原理是通过使用 prototype 属性。在原型继承中，子类的原型对象指向父类的实例对象，从而实现继承。 以下是一个实现原型继承的示例代码： function Person(name, age) { this.name = …

    other 2023年6月26日
    00

  • java对象克隆实现方法详解

    Java对象克隆实现方法详解 对象克隆是指创建一个与原始对象具有相同状态的新对象。在Java中，可以使用不同的方法实现对象克隆。以下是关于Java对象克隆的详细攻略。 方法一：实现Cloneable接口 在需要克隆的类中实现Cloneable接口，该接口是一个标记接口，没有任何方法。 重写Object类的clone()方法，并将访问修饰符改为public。 …

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