Datatables 在asp.net mvc

Datatables 在asp.net mvc中的使用

前言

最近使用ABP(ASP.NET Boilerplate)做新项目，以前都是自己扩展一个HtmlHelper来完成同步/异步分页，但是有个地方一直不满意，排序太费劲。
以前接触过一点点的Datatables，知道它的排序非常方便，点击表头即可排序，还支持多列排序，然后就把Datatables集成到项目里了。

Datatables简介

Datatables(以下简称dt)是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 点击进入Datatables中文网

  • 分页，即时搜索和排序
  • 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
  • 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
  • 各式各样的扩展: Editor, TableTools, FixedColumns ……
  • 丰富多样的option和强大的API
  • 支持国际化
  • 超过2900+个单元测试
  • 免费开源 （ MIT license ）！
  • 更多特性请到Datatables中文网查看看

与Asp.Net Mvc（以下简称mvc）结合使用

本文重点讲解dt在mvc(此处应该吐槽webform)中的使用。其他语言也是差不多的用法。

初始化Datatables

引入js和css

//bootstrap的css
<link href="~/Content/bootstrap.min.css" rel="stylesheet"/>
//这里我们使用bootstrap的主题，其他的请对号入座
<link href="~/Scripts/DataTables-1.10.10/media/css/dataTables.bootstrap.min.css" rel="stylesheet" />

//jquery
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
//bootstrap主题的js
<script src="~/Scripts/DataTables-1.10.10/media/js/jquery.dataTables.min.js"></script>
//核心js
<script src="~/Scripts/DataTables-1.10.10/media/js/dataTables.bootstrap.js"></script>
//自定义的js，修改dt默认的一些配置（如中文提示）
<script src="~/Scripts/DataTables.js"></script>
//DataTables.js  这是Datatables的相关知识，具体作用请求官网查看
$.extend($.fn.dataTable.defaults, {
    "dom": "<‘row‘<‘col-sm-12‘tr>>" +
            "<‘row‘<‘col-sm-12 text-center‘i>>" +
            "<‘row‘<‘col-sm-5‘l><‘col-sm-7‘p>>",//默认是lfrtip
    "processing": true,//加载中
    "serverSide": true,//服务器模式（★★★★★重要，本文主要介绍服务器模式）
    "searching": false,//datatables自带的搜索
    "scrollX": true,//X滑动条
    "pagingType": "full_numbers",//分页模式
    "ajax": {
        "type": "POST",//（★★★★★重要）
        "contentType": "application/json; charset=utf-8"
    },
    "language": {
        "processing": "加载中...",
        "lengthMenu": "每页显示 _MENU_ 条数据",
        "zeroRecords": "没有匹配结果",
        "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
        "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
        "infoFiltered": "(由 _MAX_ 项结果过滤)",
        "infoPostFix": "",
        "search": "搜索:",
        "url": "",
        "emptyTable": "没有匹配结果",
        "loadingRecords": "载入中...",
        "thousands": ",",
        "paginate": {
            "first": "首页",
            "previous": "上一页",
            "next": "下一页",
            "last": "末页"
        },
        "aria": {
            "sortAscending": ": 以升序排列此列",
            "sortDescending": ": 以降序排列此列"
        }
    }
});

初始化dt

dt支持多种数据源，在此我们只说“服务器处理”。
服务器处理的代码如下（有些默认配置已经在上面的DataTables.js中配置,如开启服务器模式"serverSide": true）：

<table id="area" class="table" data-order="[[0,&quot;desc&quot;]]" width="100%">
    <thead>
        <tr>
            <th data-data="Id" data-visible="false">Id</th>
            <th data-data="Name">名称</th>
            <th data-data="Description" data-orderable="false">描述</th>
            <th data-data="PointX">X坐标</th>
            <th data-data="PointY">Y坐标</th>
        </tr>
    </thead>
</table>
<script>
    $(function(){
        var userTable = $(‘#area‘).DataTable({
            "ajax": {
                "url": "@Url.Action("GetDatas")",
                "data": function(data) {
                    data.Name = $("#name").val();;//此处是添加额外的请求参数
                    return JSON.stringify(data);
                }
            }
        });
    });
</script>

dataTable和DataTable的区别

1.10.x版本后，有两种初始化的写法， $().dataTable() 返回的是一个jQuery实例， \(().DataTable() 返回的是Datatables的api实例， 如果在使用过程中出现某某方法不存在不支持之类的，一般都是由于是用第一种方法初始化dt，用返回的对象去调用api的方法，所以报错误。 dt的api实例和jquery可以互转 ，jquery转api：dt.api();api转jquery：dt.to\)(); 详细参考 api手册

服务器端获取Datatables的请求参数

当使用服务器处理时，dt会发送如下数据给服务器

名称 类型 描述
draw integerJS 请求次数计数器，每次发送给服务器后又原封返回.
start integerJS 第一条数据的起始位置，比如0代表第一条数据
length integerJS 每页显示的条数.
search[value] stringJS 全局的搜索条件，针对于每一列（ searchable需要设置为 true ）
search[regex] booleanJS 如果为 true代表全局搜索的值是作为正则表达式处理，为 false则不是。
order[i][column] integerJS i是一个数组索引，对应的是 columns，从0开始，次参数表示那一列需要排序
order[i][dir] stringJS 上面确定了是那一列，这个确定对应的列是什么样的排序方式 desc 是降序 asc升序
columns[i][data] stringJS columns 绑定的数据源，由 columns.data 定义
columns[i][name] stringJS columns.name 里定义的名称
columns[i][searchable] booleanJS 标记列是否能被搜索 为 true代表可以，否则不可以，这个是由 columns.searchable 控制
columns[i][orderable] booleanJS 标记列是否能排序 为 true代表可以，否则不可以，这个是由 columns.orderabl 控制
columns[i][search][value] stringJS 特定列的搜索条件
columns[i][search][regex] booleanJS 特定列的搜索条件是否视为正则表达式

可以看到，请求的参数还是很规则的。
我们可以使用Request.Form(post方式),Request.QueryString(get方式)或者Request.Params/Request获取请求参数，但是如果这么做就太low了，每个方法都要写一大堆的Request那还不如不用呢。
幸好，我们有ModelBinder。

使用asp.net mvc的ModelBinder（模型绑定）自定绑定请求的参数

上文讲到如果使用Request的方式我们还不如不用，那么我们这里就用到了ModelBinder（其实也是对Request进行了封装），我们可以用一个类还接收所有的请求参数，如下所示:

public JsonResult GetDatas(DataTablesParameters query)
{
}

下面我们开始编写这个类。
此处的排序只实现了单列排序，如需多列排序请自行修改

/// <summary>
    ///     DataTables参数
    /// </summary>
    public class DataTablesParameters
    {
        /// <summary>
        ///     请求次数计数器
        /// </summary>
        public int Draw { get; set; }

        /// <summary>
        ///     第一条数据的起始位置
        /// </summary>
        public int Start { get; set; }

        /// <summary>
        ///     每页显示的数据条数
        /// </summary>
        public int Length { get; set; }

        /// <summary>
        ///     数据列
        /// </summary>
        public List<DataTablesColumns> Columns { get; set; }

        /// <summary>
        ///     排序
        /// </summary>
        public List<DataTablesOrder> Order { get; set; }

        /// <summary>
        ///     搜索
        /// </summary>
        public DataTablesSearch Search { get; set; }

        /// <summary>
        ///     排序字段
        /// </summary>
        public string OrderBy
        {
            get
            {
                return Columns != null && Columns.Any() && Order != null && Order.Any()
                    ? Columns[Order[0].Column].Data
                    : string.Empty;
            }
        }

        /// <summary>
        ///     排序模式
        /// </summary>
        public DataTablesOrderDir OrderDir
        {
            get
            {
                return Order != null && Order.Any()
                    ? Order[0].Dir
                    : DataTablesOrderDir.Desc;
            }
        }
    }

    /// <summary>
    ///     排序
    /// </summary>
    public class DataTablesOrder
    {
        /// <summary>
        ///     排序的列的索引
        /// </summary>
        public int Column { get; set; }

        /// <summary>
        ///     排序模式
        /// </summary>
        public DataTablesOrderDir Dir { get; set; }
    }

    /// <summary>
    ///     排序模式
    /// </summary>
    public enum DataTablesOrderDir
    {
        /// <summary>
        ///     正序
        /// </summary>
        Asc,

        /// <summary>
        ///     倒序
        /// </summary>
        Desc
    }

    /// <summary>
    ///     数据列
    /// </summary>
    public class DataTablesColumns
    {
        /// <summary>
        ///     数据源
        /// </summary>
        public string Data { get; set; }

        /// <summary>
        ///     名称
        /// </summary>
        public string Name { get; set; }

        /// <summary>
        ///     是否可以被搜索
        /// </summary>
        public bool Searchable { get; set; }

        /// <summary>
        ///     是否可以排序
        /// </summary>
        public bool Orderable { get; set; }

        /// <summary>
        ///     搜索
        /// </summary>
        public DataTablesSearch Search { get; set; }
    }

    /// <summary>
    ///     搜索
    /// </summary>
    public class DataTablesSearch
    {
        /// <summary>
        ///     全局的搜索条件的值
        /// </summary>
        public string Value { get; set; }

        /// <summary>
        ///     是否为正则表达式处理
        /// </summary>
        public bool Regex { get; set; }
    }

完成，这样，当我们要使用Datatables的时候，我们使用这个类(或这个类的派生类)来接收请求参数。

返回Datatables规定的Json

Datatables要求返回的数据Json

名称 类型 描述
draw integerJS 请求次数计数器，每次发送给服务器后又原封返回.
recordsTotal integerJS 即没有过滤的记录数（数据库里总共记录数）
recordsFiltered integerJS 过滤后的记录数
data arrayJS 表中中需要显示的数据。
error stringJS 可选。你可以定义一个错误来描述服务器出了问题后的友好提示

处理返回的数据

当我们把包含第n页的m数据放在一个List的时候，我们就需要封装以下Datatables想要的数据格式了。

    public class DataTablesResult<TEntity>
    {
        public DataTablesResult(int drawParam, int recordsTotalParam, int recordsFilteredParam, IReadOnlyList<TEntity> dataParam)
        {
            draw = drawParam;
            recordsTotal = recordsTotalParam;
            recordsFiltered = recordsFilteredParam;
            data = dataParam;
        }
        public DataTablesResult(string errorParam)
        {
            error = errorParam;
        }
        public int draw { get; set; }
        public int recordsTotal { get; set; }
        public int recordsFiltered { get; set; }
        public IReadOnlyList<TEntity> data { get; set; }
        public string error { get; set; }

调用

var data = new Area().GetData();
if (!string.IsNullOrEmpty(query.Name))
    data = data.Where(n => n.Name.Contains(query.Name));
data = data.OrderBy(n=>n.Id);
var count = data.Count();
var result = data.Skip(query.Start).Take(query.Length).ToList();
var resultJson = new DataTablesResult<Area>(draw, recordsFiltered, recordsFiltered, result);
return Json(resultJson);

渲染Table，展示数据

服务器已经返回了我们想要的Json数据，这时候我们就要开始渲染Table，让它将数据显示正常了。

dt的渲染方式主要有js渲染和html的data-属性来渲染，我选择使用data-属性来渲染（即初始化的时候的table）。

Table的data-data属性要和返回的实体类的属性对应，否则渲染不上

添加行操作

我们需要在每行的后面加上诸如“修改”，“审核”，“删除”等等的操作按钮，在dt里怎么操作呢？
其实很简单。

table的表头最后一行加如下代码：

<th data-orderable="false">操作</th>

在dt初始化的时候添加如下代码：

       "columnDefs": [
            {
                "targets": -1,//-1表示最后一行
                "width": "100px",
                render: function (data, type, full, meta) {
                    return ‘<a class="btn btn-sm btn-info" href="javascript:;">设置<i class="fa fa-cogs"></i></a>  ‘ +
                        ‘<a class="btn btn-sm btn-info" href="javascript:;">删除<i class="fa fa-trash"></i></a>‘;
                }
            }]

效果图

源码

源码

具体位置在项目MvcDemo的Controller里

时间： 2024-07-29 22:37:13

Datatables 在asp.net mvc的相关文章

jQuery DataTables and ASP.NET MVC Integration

part 1 : http://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part Introduction The jQuery DataTables plug-in is an excellent client-side component that can be used to create rich-functional tables in the web brows

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

引言: 本人想自己个博客网站出来,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之后,发现即使你用了bootstrap还是要自己写css样式,都是自学的,前端真的很垃圾,在网上找了很多UI,以下是各种UI的地址,需要的可以去看看: H-ui:http://www.h-ui.net/H-ui.admin.shtml ,是一个前端大牛弄得,模仿bootstrap,做适合中国网上的UI

ASP.NET MVC搭建项目后台UI框架—7、统计报表

ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 ASP.NET MVC搭建项目后台UI框架—6.客户管理(添加.修改.查询.分页) ASP.NET MVC搭建项目后台UI框架—7.统计报表 本节,我将通

ASP.NET MVC和jQuery DataTable整合

本文包含代码示例说明如何jQuery插件开发者可以集成到ASP.NET MVC应用程序. 下载源代码- 87.4 KB Introduction The jQuery DataTables plug-in is an excellent client-side component that can be used to create rich-functional tables in the web browser. This plug-in adds lot of functionalitie

ASP.NET MVC搭建项目后台UI框架—9、服务器端排序

ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 ASP.NET MVC搭建项目后台UI框架—6.客户管理(添加.修改.查询.分页) ASP.NET MVC搭建项目后台UI框架—7.统计报表 ASP.NE

ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中

ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 ASP.NET MVC搭建项目后台UI框架—6.客户管理(添加.修改.查询.分页) ASP.NET MVC搭建项目后台UI框架—7.统计报表 ASP.NE

ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互

目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.演示Controller和View的交互 这一节,我将用一个Demo来演示在此UI框架中,控制器和视图的交互.以渠道管理为例.效果图如下: 这里我使用了基于jquery的模态窗体组件lhgdialo

ASP.NET MVC 使用Remote特性实现远程属性验证

RemoteAttribute是asp.net mvc 的一个验证特性,它位于System.Web.Mvc命名空间 下面通过例子来说明 很多系统中都有会员这个功能,会员在前台注册时,用户名不能与现有的用户名重复,还要求输入手机号码去注册,同时手机号码也需要验证是否重复,下面是实体类 /// <summary> /// 会员 /// </summary> public class Member { public int Id { get; set; } [Required(Error

95后实习生的远程办公体验（asp.net mvc\C#技术栈）

这个月我们做了一件别人看起来很疯狂的事情,就是让一批95后的实习生实行远程办公,效果还不错,于是写此文总结一下. 其实认真算算,我自己的远程工作经验有十年了吧,在北京工作的时候天气不好就申请在家办公,在硅谷的时候每周有三天在家办公,两天去办公室办公.所以我也算得上是远程办公的老司机了吧. 不过,我之前都是对有多年工作经验的老司机才实行远程办公,还从来没有对还未毕业的实习生实行过.老实说,不敢啊,也不放心,况且我在cnblogs博客园呆了十年,还真没见过对还未毕业的实习生实行过远程办公的. 那为什