SpringBoot结合dataTables(Ajax,分页,新增列)
2017-07-28 18:38
926 查看
需求
说在前面:首先用静态的方式集成dataTables,能跑之后,再对照下面的实现来实现动态功能。目标是实现一个动态的dataTables实例,通过Ajax方式获取数据,带有分页功能,并新增一列。
实现
HTML部分//css引入 dataTables包 <link rel="stylesheet" type="text/css" href="/css/component/jquery.dataTables.min.css"/> <table id="example" class="display table-striped table-bordered table-hover table-condensed" cellspacing="0" width="100%"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> </thead> </table> //js引入 dataTables包 <script src="/js/jquery.js"></script> <script src="/js/component/jquery.dataTables.min.js"></script>
js代码自定义部分
<script> $(function () { //提示信息 初始化设置 一般不需要改 var lang = { "sProcessing": "处理中...", "sLengthMenu": "每页 _MENU_ 项", "sZeroRecords": "没有匹配结果", "sInfo": "当前显示第 _START_ 至 _END_ 项,共 _TOTAL_ 项。", "sInfoEmpty": "当前显示第 0 至 0 项,共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页", "sJump": "跳转" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } }; //重要修改 表格内容的自定义,需要根据业务定制 var table = $("#example").dataTable({ language:lang, //提示信息 autoWidth: false, //禁用自动调整列宽 stripeClasses: ["odd", "even"], //为奇偶行加上样式,兼容不支持CSS伪类的场合 processing: true, //隐藏加载提示,自行处理 serverSide: true, //启用服务器端分页 searching: false, //禁用原生搜索 orderMulti: false, //启用多列排序 order: [], //取消默认排序查询,否则复选框一列会出现小箭头 renderer: "bootstrap", //渲染样式:Bootstrap和jquery-ui pagingType: "simple_numbers", //分页样式:simple,simple_numbers,full,full_numbers columnDefs: [{ "targets": 'nosort', //列的样式名 "orderable": false //包含上样式名‘nosort’的禁止排序 }], ajax: function (data, callback, settings) { //封装请求参数 var param = {}; param.pageSize= data.length;//页面显示记录条数,在页面显示每页显示多少项的时候 param.startIndex = data.start;//开始的记录序号 param.pageIndex = (data.start / data.length);//当前页码 //ajax请求数据方法 $.ajax({ type: "GET", url: "/query",//url请求的地址 cache: false, //禁用缓存 data: param, //传入组装的参数 dataType: "json", success: function (result) { //封装返回数据重要 var returnData = {}; //这里直接自行返回了draw计数器,应该由后台返回 returnData.draw = data.draw; //返回数据全部记录 returnData.recordsTotal = result.pageInfo.totalCount; //后台不实现过滤功能,每次查询均视作全部结果 returnData.recordsFiltered = result.pageInfo.totalCount; //返回的数据列表 returnData.data = result.pageInfo.data; //调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染 //此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕 callback(returnData); } }); }, //列表表头字段 columns: [ { "data": "id" }, { "data": "name" }, { "data": "gender" }, //新建列的 定义 { className : "td-operation text-center", data: null, defaultContent:"", orderable : false, width : "160px" } ], //新建列的 数据内容 "createdRow": function ( row, data, index ) { //行渲染回调,在这里可以对该行dom元素进行任何操作 var $btn = $('<div class="btn-group text-cen">'+ '<button type="button" class="btn btn-sm btn-primary btn-edit">修改</button>'+ '<button type="button" class="btn btn-sm btn-danger btn-del">删除</button>'+ '</div>'+ '</div>'); $('td', row).eq(3).append($btn); } }).api(); //此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象 }); </script>
后台Controller
//查询 @RequestMapping(value = "/query", method = RequestMethod.GET) @ResponseBody public RtPageInfo query( @RequestParam(required = false, name = "pageSize") Integer pageSize, @RequestParam(required = false, name = "startIndex") Integer startIndex, @RequestParam(required = false, name = "pageIndex") Integer pageIndex){ //这里做查询操作 //返回 RtPageInfo pageInfo = new RtPageInfo(); pageInfo.setData(data);//这里是数据内容 List pageInfo.setPageNum(startIndex/pageSize);//Integer pageInfo.setPageSize(pageSize);//pageSize pageInfo.setTotalCount(count));//BigInteger return pageInfo ; }
相关文章推荐
- eayui结合Spring Boot实现客户端分页
- 分页查询spring boot+spring data+ajax
- 基于springBoot+DataTables插件的分页实现
- Spring Boot 声明式事务结合相关拦截器
- Spring Boot Spring Data Jpa全解之分页特殊查询
- Spring Boot 结合shiro做第三方登录验证
- springboot新增过滤器Filter
- angular+bootstrap+spring boot实现分页
- 在Spring Boot中使用Spring-data-jpa实现分页查询
- [增删改查] SpringBoot 整合 ElasticSearch 之 ElasticsearchRepository 的 CRUD、分页接口
- ajax结合接口 分页插件
- 玩转spring boot——结合jQuery和AngularJs
- spring-boot结合mybatis-spring的一个例子
- spring boot结合dubbox一个坑爹的例子
- Spring Boot 2.0新增的Actuator端点的特性
- springboot结合mybatis操作多数据源
- spring boot shiro结合使用,资源资源加载不到问题(filterchain的问题 ) 3ff8
- Spring Boot+Mybatis+Druid+PageHelper实现多数据源并分页的方法
- springboot学习三(springboot结合spring data jpa和freemarker显示)
- Spring Boot结合cxf发布WebService接口jar包冲突的问题