Net MVC使用datatables插件

基本用法

1 - 引入js和css

2 - html

                        <table id="fieldTable" class="table table-bordered  table-striped table-hover">

                            <thead>

                                <tr class="caption">

                                    <th>序号</th>

                                    <th data-data="NameEn">字段名</th>

                                    <th data-data="NameCh">中文名</th>

                                    <th data-data="FieldType">类型</th>

                                    <th data-data="FieldLength">长度</th>

                                    <th data-data="FieldNote">注释</th>

                                    <th data-data="FieldExplain">说明</th>

                                </tr>

                            </thead>

                        </table>

3 - js

        table = $('#fieldTable').DataTable({

            "paging": false,

            "ordering": false,

            "info": false,

            "searching": false,

            "ajax": {

                'url': '/Home/GetTableData',

                'dataType': 'json',

                'data': { TableId: tableId }

            },

            "columns": [

                { "data": null },

                { "data": "NameEn" },

                { "data": "NameCh" },

                { "data": "FieldType" },

                { "data": "FieldLength" },

                { "data": "FieldNote" },

                {

                    "data": null,

                    "defaultContent": ''

                },

                { "data": "FieldExplain" }

            ],

            "columnDefs": [

                {

                    "targets": -1,

                    "visible": false

                },

                {

                    "targets": -2,

                    "createdCell": function (td, cellData, rowData, row, col) {

                        if (cellData.FieldExplain.length > 0) {

                            $(td).addClass("details-control");

                        }

                    }

                }

            ],

            "order": [[1, 'asc']],

            "language": {

                "processing": "加载中...",

                "lengthMenu": "每页显示 _MENU_ 条数据",

                "zeroRecords": "没有匹配结果",

                "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",

                "infoEmpty": "显示第 0 至 0 项结果，共 0 项",

                "infoFiltered": "(由 _MAX_ 项结果过滤)",

                "infoPostFix": "",

                "search": "搜索:",

                "url": "",

                "emptyTable": "没有匹配结果",

                "loadingRecords": "载入中..."

            }

注意:这里有一个大坑,就是大小写问题,官网中文文档很多地方都是小写的,英文文档却是大写的,没有仔细研究大小写的差异,可自行百度 $('#fieldTable').DataTable

4 - cs

4.1 - 入参拓展类

using System.Collections.Generic;

using System.Linq;

namespace TrumguDataExplain.Web.Models.DataTables

{

    /// <summary>

    ///     DataTables参数

    /// </summary>

    public class DataTablesParameters

    {

        public string TableId { get; set; }

        /// <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 => Columns != null && Columns.Any() && Order != null && Order.Any()

            ? Columns[Order[].Column].Data

            : string.Empty;

        /// <summary>

        ///     排序模式

        /// </summary>

        public DataTablesOrderDir OrderDir => Order != null && Order.Any()

            ? Order[].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; }

    }

}

一般是搜索条件继承这个类 我这里有个TableId原本不该属于这个类,只是懒得继承了

4.2 - 出参拓展类

using System.Collections.Generic;

namespace TrumguDataExplain.Web.Models.DataTables

{

    /// <summary>

    ///     DataTable的返回信息

    /// </summary>

    /// <typeparam name="TEntity"></typeparam>

    public class DataTablesResult<TEntity>

    {

        /// <summary>

        ///     构造函数

        /// </summary>

        /// <param name="draw0">请求次数计数器</param>

        /// <param name="recordsTotal0">总共记录数</param>

        /// <param name="recordsFiltered0">过滤后的记录数</param>

        /// <param name="data0">数据</param>

        public DataTablesResult(int draw0, int recordsTotal0, int recordsFiltered0, IReadOnlyList<TEntity> data0)

        {

            draw = draw0;

            recordsTotal = recordsTotal0;

            recordsFiltered = recordsFiltered0;

            data = data0;

        }

        /// <summary>

        ///     构造函数

        /// </summary>

        /// <param name="error0">服务器错误信息</param>

        public DataTablesResult(string error0)

        {

            error = error0;

        }

        /// <summary>

        ///     请求次数计数器

        /// </summary>

        public int draw { get; set; }

        /// <summary>

        ///     总共记录数

        /// </summary>

        public int recordsTotal { get; set; }

        /// <summary>

        ///     过滤后的记录数

        /// </summary>

        public int recordsFiltered { get; set; }

        /// <summary>

        ///     数据

        /// </summary>

        public IReadOnlyList<TEntity> data { get; set; }

        /// <summary>

        ///     错误信息

        /// </summary>

        public string error { get; set; }

    }

}

感觉这个类一般情况下倒是不需要修改

4.3 - 前端请求方法

        /// <summary>

        /// dataTable

        /// </summary>

        /// <param name="parameters"></param>

        /// <returns></returns>

        public JsonResult GetTableData(DataTablesParameters parameters)

        {

            IBaseBll<FieldInfo> fieldBll = new BaseBll<FieldInfo>();

            var list = fieldBll.QueryByIf(m => m.TableId == Convert.ToInt32(parameters.TableId)).ToList();

            var count = list.Count();

            return DataTablesJson(parameters.Draw, count, count, list);

        }

4.4 - 返回json组合方法

        /// <summary>

        /// 构造函数

        /// </summary>

        /// <param name="draw">请求次数计数器</param>

        /// <param name="recordsTotal">总共记录数</param>

        /// <param name="recordsFiltered">过滤后的记录数</param>

        /// <param name="data">数据</param>

        /// <param name="error">服务器错误信息</param>

        public JsonResult DataTablesJson<TEntity>(int draw, int recordsTotal, int recordsFiltered,

            IReadOnlyList<TEntity> data, string error = null)

        {

            var result = new DataTablesResult<TEntity>(draw, recordsFiltered, recordsFiltered, data);

            return Json(result, JsonRequestBehavior.AllowGet);

        }

到这里基本表格就可以显示数据了!

在说一下我这里用到的一些方法

1 - 自定义索引列

            "columns": [

                { "data": null },

                { "data": "NameEn" },

                { "data": "NameCh" },

                { "data": "FieldType" },

                { "data": "FieldLength" },

                { "data": "FieldNote" },

                {

                    "data": null,

                    "defaultContent": ''

                },

                { "data": "FieldExplain" }

            ],

js初始化时,第一列要为空然后调用下面的函数

    //重绘dataTable 自定义序号

    function Init_Index() {

        table.on('draw.dt',

            function () {

                table.column(0,

                    {

                        search: 'applied',

                        order: 'applied'

                    }).nodes().each(function (cell, i) {

                        //i 从0开始，所以这里先加1

                        i = i + 1;

                        //服务器模式下获取分页信息，使用 DT 提供的 API 直接获取分页信息

                        var page = table.page.info();

                        //当前第几页，从0开始

                        var pageno = page.page;

                        //每页数据

                        var length = page.length;

                        //行号等于 页数*每页数据长度+行号

                        var columnIndex = (i + pageno * length);

                        cell.innerHTML = columnIndex;

                    });

            });

    }

2 - 表格附加信息的添加

            "columns": [

                { "data": null },

                { "data": "NameEn" },

                { "data": "NameCh" },

                { "data": "FieldType" },

                { "data": "FieldLength" },

                { "data": "FieldNote" },

                {

                    "data": null,

                    "defaultContent": ''

                },

                { "data": "FieldExplain" }

            ],

看倒数第二列时我打算,在这里显示加号的,所以这列的data也为null

            "columnDefs": [

                {

                    "targets": -1,

                    "visible": false

                },

                {

                    "targets": -2,

                    "createdCell": function (td, cellData, rowData, row, col) {

                        if (cellData.FieldExplain.length > 0) {

                            $(td).addClass("details-control");

                        }

                    }

                }

            ],

我对倒数第二列 createdCell 创建单元格的函数,进行了逻辑判断,如果怎么样,对这个单元格加class

td.details-control {

    background: url('../resources/images/details_open.png') no-repeat center center;

    cursor: pointer;

}

tr.shown td.details-control {

    background: url('../resources/images/details_close.png') no-repeat center center;

}

官网的css被我超了下来

    //注入details-control click事件

    function init_click() {

        $('#fieldTable tbody').on('click', 'td.details-control', function () {

            var tr = $(this).closest('tr');

            var row = table.row(tr);

            if (row.child.isShown()) {

                row.child.hide();

                tr.removeClass('shown');

            }

            else {

                row.child(format(row.data())).show();

                tr.addClass('shown');

            }

        });

    };

对这个class的元素进行click事件的注入,要放到ready里

    //附加信息样式

    function format(d) {

        return '<table border="0" style="padding-left:50px;">' +

            '<tr>' +

            '<td>说明:</td>' +

            '<td>' + d.FieldExplain + '</td>' +

            '</tr>' +

            '</table>';

    }

上面的一个方法,调用了该函数,这个函数时信息样式

3 - 中文设置

            "language": {

                "processing": "加载中...",

                "lengthMenu": "每页显示 _MENU_ 条数据",

                "zeroRecords": "没有匹配结果",

                "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",

                "infoEmpty": "显示第 0 至 0 项结果，共 0 项",

                "infoFiltered": "(由 _MAX_ 项结果过滤)",

                "infoPostFix": "",

                "search": "搜索:",

                "url": "",

                "emptyTable": "没有匹配结果",

                "loadingRecords": "载入中..."

            }

网上有很多

4 - 重新传参,也就是点击搜索之后,重新刷新表格数据

        var param = { TableId: data.node.id }

        table.settings()[0].ajax.data = param;

        table.ajax.reload();

这个相当有意思,很难在官网找到重新传递参数的方法,都是reload和url.load,但我并不想换后台的url啊?官网的想法让我很崩溃

如果在重新创建datatable,因为已经创建过了,还是回报错

终于在网上找到了相关的资料

用settings[0].ajax.data重新定义参数

然后再ajax.reload

最后上个图吧

Net MVC使用datatables插件-LMLPHP