Datatables——一款前端好用的表格插件,本地json模拟数据实现表格分页查询
2019-01-18 19:24
751 查看
版权声明:原文作者:菜菜 链接:来源:简书 简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。 https://blog.csdn.net/caicai1171523597/article/details/86642543
data.json数据如下
在做管理后台功能时,经常需要用到表格展示数据,从数据库查询返回的数据,返回集合或数组到前台,然后前台将数据渲染成表格,方便直观展示数据,通常还需要结合分页、查询、排序。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 }, 284a1 { "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后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。
欢迎留言交流。
相关文章推荐
- 使用ajax、pageHelpler分页插件、利用json数据特性实现分页查询
- 使用bootstraptable插件实现表格记录的查询、分页、排序操作
- 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
- 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- oracle12c JSON数据 使用SQL语句实现多表左外连接 显示无效数据 分页查询
- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- 基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- 使用该JavaBean可以将数据在JSP页面中以表格的形式显示出来,并具有动态排序、动态生成查询、自动分页功能
- ThinkPHP快速实现数据分页(前端/后端分离)
- 用jQuery和jTemplates插件实现客户端分页的表格展现
- ASP.NET网站权限设计实现——套用JQuery EasyUI列表显示数据、分页、查询
- ASP.NET网站权限设计实现(三)——套用JQuery EasyUI列表显示数据、分页、查询
- jquery+php实现导出datatables插件数据到excel的方法
- jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
- JS实现table表格数据排序(可支持动态数据+分页效果)
- hibernate 查询两个时间段的数据和分页实现
- JQuery页面的表格数据的增加与分页的实现
- jQuery DOM操作 实现本地表格查询
- 对Json数据的处理(模拟获取数据是来自于本地)