初识datatables
来源：互联网 发布：百度云网络不给力 编辑：程序博客网 时间：2024/06/04 01:38
初识datatables
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
Datatables的特性不再进行介绍，本人也是最近做项目用到了datatables的插件，第一次接触datatables。使用前浏览了不少博客，发现这些博客介绍的datatables的参数过于复杂，并不太适合初学者使用。因此，本人直接浏览datatables的官方网站（https://www.datatables.net/）进行学习。官网虽然是英文，但是学习起来更有层次性，有简单到复杂，更适合初学者。经过一番学习，还是成功的运用到了项目之中。使用datatables需要引用相应的js和css，可以到官网下载，目前datatables的版本已经更新至1.10.12。
JavaScript脚本 $(function(){ $("#user_table").dataTable({ "bServerSide": true, //是否启动服务器端数据导入 "bFilter" : false, //是否搜索栏 "bPaginate": true, //是否显示分页器 "bInfo": true, //是否显示表格的一些信息 "bJQueryUI": false, //是否启用JQueryUI风格 "bLengthChange": true, //是否显示每页大小的下拉框 "sPaginationType": "full_numbers", //分页样式 "sAjaxSource" : "<%=basePath%>sysUser/getUserList.do", //请求数据的URL "bProcessing" : true, //DataTables载入数据时，是否显示‘进度’提示 "aoColumnDefs": [ { "aTargets" : [0], //第1列 "mData" : "id", "mRender" : function(a, b, c, d){ return '<input type="checkbox" name="user_list" id="'+ a +'" value="'+ a +'" >'; } }, { "aTargets" : [1], //第2列 "mData" : "userName" }, { "aTargets" : [2], //第3列 "mData" : "realName" }, { "aTargets" : [3], //第4列 "mData" : "gender", "mRender" : function(a, b, c, d){ if(a == 0){ return "男"; }else{ return "女"; } } }, { "aTargets" : [4], //第5列 "mData" : "userEmail" }, { "aTargets" : [5], //第6列 "mData" : "createDate" }, { "aTargets" : [6], //第7列 "mData" : "updateDate" }, { "aTargets" : [7], //第8列 "mData" : "userRemark" }, { "aTargets" : [8], //第9列 "mData" : "userStatus", "mRender" : function(a, b, c, d){ if(a == 1){ return '<span class="label label-success radius">已启用</span>'; }else{ return '<span class="label label-defaunt radius">已停用</span>'; } } }, { "aTargets" : [9], //第10列 "mRender" : function(a, b, c, d){ if(c.userStatus == 1){ return '<a style="text-decoration:none" onClick="user_stop(this,' + c.id + ')" href="javascript:;" title="停用"><i class="Hui-iconfont"></i></a>' + '<a title="修改" href="javascript:;" onclick="user_edit('+ c.id +')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>' + '<a title="删除" href="javascript:;" onclick="user_del(this,'+ c.id +')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>'; }else{ return '<a style="text-decoration:none" onClick="user_start(this,' + c.id + ')" href="javascript:;" title="启用"><i class="Hui-iconfont"></i></a>' + '<a title="修改" href="javascript:;" onclick="user_edit('+ c.id + ')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>' + '<a title="删除" href="javascript:;" onclick="user_del(this,'+ c.id +')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>'; } } } ], "fnServerParams" : function(aoData) { aoData.push( { "name" : "deptId", "value" : deptId} //自定义参数 ); } }); }); 其中，bServerSide和sAjaxSource是最关键的参数，一个是启动服务器端数据导入，另一个是从后台请求数据的URL。fnServerParams是自定义参数，根据业务需要可以添加。前端向后台传递的参数有很多，关键的参数是sEcho、iDisplayStart和iDisplayLength。第一次向后台请求数据sEcho的值是1，第二次向后台请求数据sEcho的值是2，第三次向后台请求数据sEcho的值是3，每请求一次数据sEcho的值会加1，对于这个参数我的理解是相当于告诉浏览器这是一次新的请求。iDisplayStart是起始值，假如前端分页的页大小是10，那么第一次iDisplayStart的值就是0，第二次iDisplayStart的值就是10。iDisplayLength是前端分页的大小，随着页大小变化而变化。
后台接收请求的代码
/** * 获取用户列表 create by zhaoheng * @param sEcho * @param iDisplayStart 起始值 * @param iDisplayLength 页的大小 * @param deptId 部门编号 */ @RequestMapping("/getUserList") public void getUserList(int sEcho, int iDisplayStart, int iDisplayLength, int deptId){ logger.info("获取用户列表"); String data = sysUserService.getUserList(sEcho, iDisplayStart, iDisplayLength, deptId); //返回数据至页面 out(data); }后台返回给前端的数据封装格式
/** * 将数据对象转换为datatables识别的JSON格式数据 * @param value 要转成JSON数据的对象 * @param sEcho * @param total 总记录数 * @return */ public static String getDataTableJson(Object value, int sEcho, int total){ Map<String,Object> resultMap = new HashMap<String,Object>(); resultMap.put("sEcho", sEcho); resultMap.put("aaData", value); resultMap.put("iTotalRecords", total); resultMap.put("iTotalDisplayRecords", total); return getJson(resultMap, DEFAULT_DATE_FORMAT); }返回给前端的参数有sEcho是由前端请求数据时发送的（原样返回），aaData是渲染在表格中的数据，iTotalRecords是数据库中的数据总量，iTotalDisplayRecords是展示的数据的总量。
JSP页面
<body><nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> 用户中心 <span class="c-gray en">></span> 用户管理 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont"></i></a></nav><div class="page-container"> <div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"><a href="javascript:;" onclick="batch_delete()" class="btn btn-danger radius"><i class="Hui-iconfont"></i> 批量删除</a> <a href="javascript:;" onclick="user_add('添加用户','','510')" class="btn btn-primary radius"><i class="Hui-iconfont"></i> 添加用户</a></span> </div> <div class="mt-20"> <table id="user_table" class="table table-border table-bordered table-hover table-bg table-sort"> <thead> <tr class="text-c"> <th width="25"></th> <th width="80">用户名</th> <th width="80">真实姓名</th> <th width="90">性别</th> <th width="90">邮箱</th> <th width="130">创建时间</th> <th width="130">更新时间</th> <th width="130">备注</th> <th width="70">状态</th> <th width="100">操作</th> </tr> </thead> <tbody> </tbody> </table> </div></div></body> 0 0
- 初识datatables
- DataTables
- datatables
- datatables
- Datatables
- datatables
- datatables
- DataTables
- jquery dataTables
- Jquery-dataTables
- Datatables + Bootstrap
- jquery datatables
- jquery datatables
- datatables--阿里巴巴
- datatables API
- DataTables使用
- dataTables国际化
- Datatables笔记
- awk-13
- Spark数据分析之第3课
- BZOJ 1179 Tarjan + spfa
- js调色板
- 【REACT NATIVE 系列教程之五】NAVIGATOR(页面导航)的基本使用与传参
- 初识datatables
- intellij idea快捷键
- (转)六种Socket I/O模型幽默讲解
- 实现高并发服务器三种简化模型 线程 进程 IO复用
- VC之 线程同步之事件对象(Event)
- leetcode---Container With Most Water
- 第七届科技节编程大赛复赛题目
- （4.3.2.8）Permission Denial: starting Intent { cmp=com.xxx.xxx}解决办法
- CodeForces670AHolidays
