Net MVC使用datatables插件

基本用法

1 - 引入js和css

<link href="https://cdn.bootcss.com/datatables/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/datatables/1.10.19/js/jquery.dataTables.min.js"></script> -- 这是核心库

<script src="https://cdn.bootcss.com/datatables/1.10.19/js/dataTables.bootstrap.min.js"></script> --这个是bootstrap拓展库,我一开始只引入了这个,没用的

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

最后 上个图吧