Datatables——一款前端好用的表格插件,本地json模拟
2019-01-18 本文已影响8人
菜菜___
在做管理后台功能时，经常需要用到表格展示数据，从数据库查询返回的数据，返回集合或数组到前台，然后前台将数据渲染成表格，方便直观展示数据，通常还需要结合分页、查询、排序。Datatables是一款符合上面所有需求的表格插件，基于jquery，方便我们对表格进行交互操作
Datatables中文网链接
这是一个读取本地json数据渲染表格的示例
使用步骤
一：从官网下载最新版本的插件，并在页面中应用相应的js和css文件,我这里是引用cdn提供的文件
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
二：创建页面绑定表格的插件
<table id="tableList" width="100%" ></table>
三：为元素绑定Datatables，并初始化表格配置项
var table;
var classType={
1:'一班',
2:'二班',
3:'三班',
4:'四班',
5:'五班'
}
function createTable() {
table = $('#tableList').DataTable({
"bPaginate" : true,
"sPaginationType" : "full_numbers",
"bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
"bScrollCollapse" : true, //当显示的数据不足以支撑表格的默认的高度
"bLengthChange" : true, //每页显示的记录数
"bFilter" : false, //搜索栏
"bSort" : true, //是否支持排序功能
"bInfo" : true, //显示表格信息
"bAutoWidth" : true, //自适应宽度
"bJQueryUI" : false,//是否开启主题
"bDestroy" : true,
"bServerSide" : true,//服务器处理分页，默认是false，需要服务器处理，必须true
"sAjaxDataProp" : "aData",//是服务器分页的标志，必须有
"sAjaxSource" : "data.json" ,//服务器请求url,这里请求本地模拟的json数据。
"columns": [
{ "data": "stu_number",
"title":"序号",
"width" : "auto",
"render": function ( data, type, full, meta ) {
return data;
}
},
{ "data": "name",
"title":"姓名"
},
{"data":"stu_number",
"title":"学号"
},
{ "data": "age",
"title":"年龄"
},
{
"data":"sex",
"title":"性别",
"render": function ( data, type, row, meta ) {
if (data == 1){
return '男';
}else{
return '女';
}
}
},
{ "data": "birthday",
"title":"出生年月"
},
{ "data": "class",
"title":"班级",
"render": function ( data, type, row, meta ) {
return classType[data];
}
},
{ "data": "class",
"title":"操作",
"render": function ( data, type, row, meta ) {
if(row.class==2){
return "查看"+row.class+"班学生";
}else{
return "查看"+row.class+"班学生";
}
}
}
],
/*解决序号列没法生成的问题*/
"fnDrawCallback": function(){
var api = this.api();
var startIndex = api.context[0]._iDisplayStart;
api.column(0).nodes().each(function(cell, i) {
cell.innerHTML = startIndex + i + 1;
});
},
/*请求携带参数*/
"fnServerParams":function(aoData){
aoData._rand = Math.random();
aoData.push(
{ "name": "name", "value": '可取页面dom元素如input的value'},
{ "name": "class", "value": '' }
);
}
});
}
四：定义好本地json模拟数据，其中返回字段说明：
sEcho：来自客户端 sEcho 传来的参数，依旧返回给客户端，用作本地计数
iTotalRecords：实际的条数。对应表格底部数据说明(从 20 条中过滤)
iTotalDisplayRecords：过滤之后，实际的条数。对应表格底部数据说明（共 4 条）
aData：服务器返回的json数据，表格展示的数据源
data.json数据如下
{
"aData":[
{
"name":"菜菜",
"stu_number":20190001,
"age":18,
"sex":2,
"birthday":"2001年12月20日",
"class":1
},
{
"name":"刘菲",
"stu_number":20190002,
"age":18,
"sex":2,
"birthday":"2001年11月20日",
"class":4
},
{
"name":"陈阳",
"stu_number":20190003,
"age":18,
"sex":1,
"birthday":"2001年1月20日",
"class":2
},
{
"name":"黄一鸣",
"stu_number":20190004,
"age":18,
"sex":1,
"birthday":"2001年8月20日",
"class":3
},
{
"name":"程新",
"stu_number":20190005,
"age":18,
"sex":2,
"birthday":"2001年7月20日",
"class":5
}
],
"iTotalDisplayRecords":5,
"iTotalRecords":20,
"sEcho":0
}
五：页面加载完成，完成表格绑定数据
$(function(){
createTable();
})
效果图如下所示，自带分页，表头可切换排序
附加说明：
一：当我们使用搜索功能时，我们在前面使用了table这个全局变量存放绑定dataTable的绑定，因此在搜索时，我们只需要为搜索的参数赋上我们查询的值即可，即‘fnServerParams’方法传递的参数取实时查询的值，然后调用 draw方法即可：
function search(){
table.draw();
}
二：通过data()方法返回的长度判断服务器返回渲染后的表格数据是否为空
if(table.data().length==0){
alert("暂无数据");
return;
}
三：不使用本地模拟数据直接访问java后台的接口请求数据，java代码如下：
/**
* 查询数据列表
* @param request
* @return
*/
@RequestMapping(value = "/studentList", produces = "application/json;charset=UTF-8", method = {RequestMethod.POST,
RequestMethod.GET})
@ResponseBody
public String studentList(HttpServletRequest request) {
try {
/*DataTables 用来生成的信息*/
int sEcho = NumberUtils.toInt(request.getParameter("sEcho"), 0);
/*起始页码，若每页显示10条数据，那么第二页参数iDisplayStart为11*/
int fromRec = NumberUtils.toInt(request.getParameter("iDisplayStart"), 0);
/*每页显示的数据条数，若每页显示10条数据，那么iDisplayLength为10*/
int pageSize = NumberUtils.toInt(request.getParameter("iDisplayLength"), 10);
/*查询参数*/
String name = request.getParameter("name");
/*查询参数*/
int classNum = NumberUtils.toInt(request.getParameter("class"));
Map<String, Object> param = new HashedMap<String, Object>(4);
param.put("fromRec", fromRec);
param.put("endRec", pageSize);
param.put("name", name);
param.put("classNum", classNum);
List<Student> list = new ArrayList<>();
int count = studentService.queryListCount(param);
if (count > 0) {
list = studentService.queryList(param);
}
Map<String, Object> retMap = new HashMap<>(4);
retMap.put("sEcho", sEcho);
retMap.put("iTotalRecords", count);
retMap.put("iTotalDisplayRecords", count);
retMap.put("aData", CollectionUtils.isEmpty(list) ? new ArrayList<>() : list);
return JSONObject.toJSONString(retMap);
} catch (Exception e) {
e.printStackTrace();
}
Map<String, Object> retMap = new HashMap<>(4);
retMap.put("sEcho", 0);
retMap.put("iTotalRecords", 0);
retMap.put("iTotalDisplayRecords", 0);
retMap.put("aData", new ArrayList<>());
return JSONObject.toJSONString(retMap);
}
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。
