axui 结合 jquery.dataTables 使用的简单示例
axui 简介: 本框架是面向设计，满足设计多样化需求的前端解决方案，减少或剔除JS文件资源和API.
首先是js的引用，主要是jquery 以及 jquery.dataTables 插件的引用。
<script src="~/src/js/jquery-1.10.2.min.js"></script>
<script src="https://src.axui.cn/src/plugins/datatables/jquery.dataTables.min.js"></script>
本示例是基于axui框架的基础上进行的，因此表格样式更多的是采用的axui中设计的表格样式。主要采用了 ax-hover 鼠标经过行变色； ax-stripe 表格行颜色交替； ax-border 表格边框线 ；ax-align-left 内容居左展示；以上几个基础样式；
axui 普通表格 的示例可自行查看；基本能满足大部分的需求；而且其官方文档中，除了dataTables插件之外，还引入了几个和其相辅相成的插件，比如在实际应用中会遇到大数据表格处理，需要对表格进行类似Excel的操作，包括冻结表头、
条件筛选、固定列宽等，强大如Datatables，他都能胜任。
表格按钮js插件(dataTables.buttons.min.js)固定表头，冻结列(dataTables.fixedHeader.min.js)Datatables的附属插件,用于选择单元格和表格行，支持单选和多选。( dataTables.select.js)焦点单元格(dataTables.keyTable.js)
html 代码：
<table class="ax-table ax-hover ax-stripe ax-border ax-align-left" id="airport">
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>性别</th>
<th>创建时间</th>
<th>昵称</th>
<th>企业代码</th>
</tr>
</thead>
</table>
JavaScript 代码：
$('#airport').DataTable({
processing: true,
serverSide: true, //服务端分页
paging: true,
pageLength: 10,//分页大小
deferRender: true,
// "sAjaxDataProp" : "aData",//是服务器分页的标志，必须有
// "fnServerData": retrieveData,//分页回调函数
ajax: function (data, callback, settings) {//ajax配置为function,手动调用异步查询
var searchParams = {};
searchParams.pageSize = data.length;
searchParams.pageIndex = data.start % data.length === 0 ?
(data.start / data.length + 1) : ((data.start % data.length) + 2);
$.ajax({
type: "post",
url: "/User/GetJson",
cache: false, //禁用缓存
data: searchParams, //传入已封装的参数
dataType: "json",
success: function (res) {
data.pageNum += 1;
var lists = res;
//封装返回数据，这里仅演示了修改属性名
var returnData = {};
returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = lists.pages;
returnData.recordsFiltered = lists.total;//后台不实现过滤功能，每次查询均视作全部结果
returnData.data = lists.data;
//关闭遮罩
//$wrapper.spinModal(false);
//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
if (searchParams) {
$.extend(searchParams, searchParams);
}
callback(returnData);
},
error: function (
XMLHttpRequest,
textStatus,
errorThrown) {
Toast('查询失败', 'warning', 'danger');
}
});
},
//设置数据
columns: [
{ data: "id", defaltContent: 0 },
{ data: "name", defaultContent: "空" },
{ data: "sex", defaultContent: "未知性别" },
{ data: "nickName", defaultContent: "空" },
{ data: "createTime", defaultContent: "未知" },
{ data: "companyCode", defaultContent: "空" },
]
});
}
这是抓取的 ajax 前端请求数据；
draw: 1 columns[0][data]: id columns[0][name]: columns[0][searchable]: true columns[0][orderable]: true columns[0][search][value]: columns[0][search][regex]: false columns[1][data]: name columns[1][name]: columns[1][searchable]: true columns[1][orderable]: true columns[1][search][value]: columns[1][search][regex]: false columns[2][data]: sex columns[2][name]: columns[2][searchable]: true columns[2][orderable]: true columns[2][search][value]: columns[2][search][regex]: false columns[3][data]: nickName columns[3][name]: columns[3][searchable]: true columns[3][orderable]: true columns[3][search][value]: columns[3][search][regex]: false columns[4][data]: createTime columns[4][name]: columns[4][searchable]: true columns[4][orderable]: true columns[4][search][value]: columns[4][search][regex]: false columns[5][data]: companyCode columns[5][name]: columns[5][searchable]: true columns[5][orderable]: true columns[5][search][value]: columns[5][search][regex]: false order[0][column]: 0 order[0][dir]: asc start: 0 length: 10 search[value]: search[regex]: false
后端代码就简单的先贴下正常的返回格式好了；其中 recordsFiltered 表示过滤后的总条数；data 返回json数据； draw 默认为 1；recordsTotal 记录的总页数；
{"recordsFiltered":2,"data":[{"id":1,"name":"admin","sex":"女","createTime":"2021-09-21","nickName":"小六儿","companyCode":"5X7200A"},{"id":3,"name":"admin2","sex":"女","createTime":"2021-09-08","nickName":"小鱼儿","companyCode":"6D060A2"}],"draw":1,"recordsTotal":2}
由于本示例中对返回参数做了处理，所以实际的返回信息是
{ "total":12, "data":[ { "id":1, "name":"admin", "sex":"女", "createTime":"2021-09-21", "nickName":"小六儿", "companyCode":"5X7200A" }, { "id":3, "name":"admin2", "sex":"女", "createTime":"2021-09-08", "nickName":"小鱼儿", "companyCode":"6D060A2" }, { "id":6, "name":"admin3", "sex":"女", "createTime":"2021-09-08", "nickName":"小鱼儿", "companyCode":"6D060A2" }, { "id":7, "name":"admin4", "sex":"女", "createTime":"2021-09-08", "nickName":"小鱼儿", "companyCode":"6D060A2" }, { "id":8, "name":"admin5", "sex":"女", "createTime":"2021-09-08", "nickName":"小鱼儿", "companyCode":"6D060A2" }, { "id":9, "name":"admin6", "sex":"女", "createTime":"2021-09-08", "nickName":"小鱼儿", "companyCode":"6D060A2" }, { "id":10, "name":"admin7", "sex":"女", "createTime":"2021-09-08", "nickName":"小鱼儿", "companyCode":"6D060A2" }, { "id":11, "name":"admin8", "sex":"女", "createTime":"2021-09-08", "nickName":"小鱼儿", "companyCode":"6D060A2" }, { "id":12, "name":"admin9", "sex":"女", "createTime":"2021-09-08", "nickName":"小鱼儿", "companyCode":"6D060A2" }, { "id":13, "name":"admin10", "sex":"女", "createTime":"2021-09-08", "nickName":"小鱼儿", "companyCode":"6D060A2" } ], "draw":1, "pages":2 }
后端代码：
[HttpPost] public IActionResult GetJson(int pageIndex = 1, int pageSize = 10) { var queryable = userService.GetList().Select(x => new { Id = x.ID, Name = x.Name, Sex = x.Sex, CreateTime = x.CreateTime.ToString("yyyy-MM-dd"), NickName = x.NickName, CompanyCode = x.CompanyCode }); int total = queryable.Count(); var data = queryable.OrderBy(x => x.Id).Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList(); var pages = total % pageSize > 0 ? total / pageSize + 1 : total / pageSize; //其中draw是请求中的draw参数，data是表格中的数据。recordsFiltered是过滤后的数据总数，recordsTotal是原始数据总数。 return Json(new { total = total, data = data, draw = 1, pages = pages }); }
好了，以上为本篇全部内容，另附上 DataTable中文网地址 ~
