基本用法
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[0].Column].Data : string.Empty; /// <summary> /// 排序模式 /// </summary> public DataTablesOrderDir OrderDir => 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; } } }
一般是 搜索条件 继承这个类 我这里有个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
最后 上个图吧