网站制作前期所需要准备,wordpress邮箱配置文件,装修网站效果图,如何选择网站定制公司前些天发现了一个巨牛的人工智能学习网站#xff0c;通俗易懂#xff0c;风趣幽默#xff0c;忍不住分享一下给大家。点击跳转到教程。
效果#xff1a;
我这个表格数据 比较少没有第2页 有多例多页的效果#xff08;带滚动条和翻页#xff09;#xff1a; 1. jsp页面…前些天发现了一个巨牛的人工智能学习网站通俗易懂风趣幽默忍不住分享一下给大家。点击跳转到教程。
效果
我这个表格数据 比较少没有第2页 有多例多页的效果带滚动条和翻页 1. jsp页面
表格声明部分 div classrowdiv classcol-md-12 col-sm-12 col-xs-12div classx_paneldiv classx_titleh2权限角色管理 /h2ul classnav navbar-right panel_toolboxlia classcollapse-linki classfa fa-chevron-up/i/a/lilia hrefjavascript:void(0); idaddi classfa fa-plus/i/a/li/uldiv classclearfix/div/divdiv classx_contentdiv classform-inlinelabel角色名称input idtheRoleName typetext classform-control input-sm placeholder输入角色名称 stylewidth: 100px;/label button classbtn btn-success btn-sm stylemargin-bottom:0; onclickjavascript: myTable.ajax.url(system/getAuthRoleList).load();i classfa fa-search查询/i/buttonbutton classbtn btn-info btn-sm stylemargin-bottom:0; onclickreset();i classfa fa-undo重置/i/button/divtable iddatatable classtable table-striped table-borderedtheadtrth width120px序号/thth width340px角色名称/thth width440px角色资源字串/thth操作/th/tr/thead/table/div/div/div/div 表格初始化部分 页面加载的时候 会自动初始化表格从后端查出数据装入表中。 !-- 分页相关JS --script srccss/vendors/datatables.net/js/jquery.dataTables.min.js/scriptscript srccss/vendors/datatables.net-bs/js/dataTables.bootstrap.js/scriptscript typetext/javascriptvar myTable$(function() {//初始化表格对象myTable $(#datatable).DataTable({dom: irtlp,searching: false,processing: true,serverSide: true,paging: true,info: true,scrollX: true, //列太多超过显示长度需要滚动条时使用ajax: {url: system/getAuthRoleList,// 数据请求地址type: POST,data: function (params) {//此处为定义查询条件 传给控制器的参数//角色名称params.roleName $(#theRoleName).val()}},columns: [{ data: id },{ data: roleName },{ data: resourcesIds }],columnDefs: [{targets: 3,// 操作例的位置从0开始数为第几例data: id,width: 140,render: function(data, type, full){return a idupd classbtn btn-info btn-xsi classfa fa-pencil/i修改权限/a button classbtn btn-danger btn-xs onclickdeleteRoleRes(data)i classfa fa-remove/i 删除/button}}],language: {url: css/vendors/language-zh.json}}); !-- 分页相关JS --script srccss/vendors/datatables.net/js/jquery.dataTables.min.js/scriptscript srccss/vendors/datatables.net-bs/js/dataTables.bootstrap.js/scriptscript typetext/javascriptvar myTable$(function() {//初始化表格对象myTable $(#datatable).DataTable({dom: irtlp,searching: false,processing: true,serverSide: true,paging: true,info: true,scrollX: true, //列太多超过显示长度需要滚动条时使用ajax: {url: system/getAuthRoleList,// 数据请求地址type: POST,data: function (params) {//此处为定义查询条件 传给控制器的参数//角色名称params.roleName $(#theRoleName).val()}},columns: [{ data: id },{ data: roleName },{ data: resourcesIds }],columnDefs: [{targets: 3,// 操作例的位置从0开始数为第几例data: id,width: 140,render: function(data, type, full){return a idupd classbtn btn-info btn-xsi classfa fa-pencil/i修改权限/a button classbtn btn-danger btn-xs οnclickdeleteRoleRes(data)i classfa fa-remove/i 删除/button}}],language: {url: css/vendors/language-zh.json}}); 2. 通过 数据请求地址 找到对应的控制器方法
参数 draw 不用管 start 从第N条开始 length 每页显示N条 roleName 查询条件此处是一个角色表用于查询角色名为N的结果 返回的参数recordsTotal、recordsFiltered 都是结果集总记录数。data结果集。draw原样返回。 /*** 加载权限角色列表* param draw* param start* param length* param roleName* return* throws Exception*/ResponseBodyRequestMapping(/getAuthRoleList)public Object getAuthRoleList(int draw, int start, int length, String roleName)throws Exception{_logger.info( 展示权限角色列表 );PageInfoAuthRole pageInfo _authRoleService.selectAuthRoleByPage((start/length)1, length, roleName);MapString, Object map new HashMapString, Object();ListObject data new ArrayListObject();for(AuthRole res : pageInfo.getList()){MapString, Object obj new HashMapString, Object();obj.put(id, res.getId());obj.put(roleName, res.getRoleName());obj.put(resourcesIds, res.getResourcesIds());data.add(obj);}map.put(draw, draw);map.put(recordsTotal, pageInfo.getTotal());map.put(recordsFiltered, pageInfo.getTotal());map.put(data, data);return map;} 只要把后端数据查出来处理为要求的json格式数据返回给datatable就是了。
我的代码分页有用pagehelper分页插件。可以不用插件自己写分页sql一样的。只要返回的数据格式对了datatable就能解析。 3.pageHelper的用法 http://blog.csdn.net/jiangyu1013/article/details/56287388点击打开链接
