layui里面的数据的分页
点哪个选项卡,就会跳到哪个记录下,同时进行一个数据的分页
DatabaseControllor
@Controller @RequestMapping("/database") public class DatabaseController { @Autowired private DatabaseService databaseService; @Autowired private TextService textService; @Autowired private GrouptalkService grouptalkService; @Autowired private NoticeService noticeService; /** * 对资料的查询的分页,左 * @param keyword * @return json */ @ResponseBody @RequestMapping("/page") public String selectCount(String keyword) { JSONObject jo = new JSONObject(); Integer i = databaseService.selectPage(keyword); jo.put("count", i); return jo.toJSONString(); } /** * 对查询到的结果进行分页,左 * @param t * @param b * @param c * @return json */ @ResponseBody @RequestMapping("/fileType") public String selectAllData(String t,Integer b,Integer c) { JSONObject jo = new JSONObject(); List<Database> list = databaseService.selectData(t,b,c); if (list != null) { jo.put("success", true); jo.put("tabnr", list); }else { jo.put("success", false); } return jo.toJSONString(); } /** * 用来通过主键ids查询文件的简介,左 * @param md * @param ids * @return */ @ResponseBody @RequestMapping("/wen") public String selectWen(Integer ids) { JSONObject jo = new JSONObject(); List<Database> list = databaseService.selectWen(ids); int i = databaseService.updateData(ids); if(list != null && i > 0) { jo.put("success", true); jo.put("wenjie", list); }else { jo.put("success", false); } return jo.toJSONString(); }
database2.jsp
<div class="layui-col-md12" id="djm-bk4"> <!-- 技术的分类选项卡 --> <div class=" tab"> <!-- 对按钮的控制 --> <div class="anniu"> <button class="layui-btn layui-btn-radius point">Java</button> </div> <div class="anniu"> <button class="layui-btn layui-btn-normal layui-btn-radius point">PHP</button> </div> <div class="anniu"> <button class="layui-btn layui-btn-warm layui-btn-radius point">.NET</button> </div> <div class="anniu"> <button class="layui-btn layui-btn-normal layui-btn-radius point">HTML</button> </div> </div> <!-- 选项卡end --> <!-- 技术资料的显示 --> <div class="data"> <div class="zliao"> <table class="zbiao"> <tr> <th style="font-size: 20px;">请点击以上按钮点你想看的资源</th> </tr> </table> <div id="paged"></div> <!-- 控制分页使用的 --> </div> <!-- 里面的div --> <!-- 用来弹出简介框 --> <!-- <form class="layui-form" action="" id="jie"> </form> --> </div> <!-- 技术资料显示 ,end-->
database2.js
// form 模块 layui.use('form', function() { var form = layui.form; form.render(); // 监听提交 form.on('submit(formDemo)', function(data) { layer.msg(JSON.stringify(data.field)); return false; }); }); //点击按钮,跳转到对应的资料页内容 $(".point").click(function() { // 获取到的 按钮名字 var va = $(this).text(); //总页数 /*$(".zliao").height(400); $(".zbiao").height(2930);*/ // 为帖子显示 区域开启分页 // 获取全部数据条数 用来分页 $.ajax({ type : "post", url : "/IPMS/database/page.do", dataType : "json", data : { keyword: va }, success : function(data) { var count = data.count; layui.laypage.render({ elem : 'paged' // 注意,这里的 test1 是 ID,不用加 # 号 , count : count //总条数 , limit:4, jump: function(obj, first){ //obj包含了当前分页的所有参数,比如: var b = obj.curr; //得到当前页,以便向服务端请求对应页的数据。 var myts = obj.limit; //得到每页显示的条数,默认为10 tzxx(va,b*(myts),(b-1)*(myts)); //调用下面的函数 } }); }, error : function() { alert("error"); } }); //ajax // 显示方向,从第几条,到第几条 }); //click //为显示的资料内容进行分页控制 var tzxx = function(d,b,c){ $.ajax({ type : "post", url : "/IPMS/database/fileType.do", dataType : "json", data : { t : d , b : b , c : c }, success : function(data) { if (data.success) { $(".zbiao").empty(); //把table里面的元素移除 for (a in data.tabnr) { var b = data.tabnr[a]; $(".zbiao").append( '<tr class="tab-nr">' +'<td ><i class="layui-icon" style="font-size:30px;">�</i>文件名</td>' +'<td ><i class="layui-icon" style="font-size:30px;">�</i>点击数</td>' +'<td ><i class="layui-icon" style="font-size:30px;">�</i>阅读量</td>' +'<td ><i class="layui-icon" style="font-size:30px;">�</i>文件简介</td>' +'</tr>' + '<tr class="tab-nr">' +'<td>'+b.filename+'</td>' +'<td>'+b.clickcount+'</td>' +'<td>'+b.reacount+'</td>' +'<td> <div id="yang"> <input type="button" value="查看简介" ids="'+b.ids+'" class="layui-btn layui-btn-radius cha"/></div></td>' +'</tr>' ); //append } //for循环
主操作页,点左边的操作栏,右边跳到相应的栏框里面即可
opration.jsp
<body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-header" id="czy-title"> <div class="layui-logo">操作管理</div> <!-- 头部区域(可配合layui已有的水平导航) --> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item"><a href="${ctx }/index.jsp">主页</a></li> <li class="layui-nav-item"><a href="${ctx }/database/talk.do">资料</a></li> <li class="layui-nav-item"><a href="javascript:;" id="pro">项目</a></li> <li class="layui-nav-item"><a href="${ctx }/Forum/zhuan.do?ym=forum">论坛</a></li> <li class="layui-nav-item"><a href="${ctx }/Ballotitle/list.do">投票</a></li> <li class="layui-nav-item"><a href="javascript:;" id="lc">流程</a></li> <li class="layui-nav-item"><a href="javascript:;" id="group">小组</a></li> </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"><a href="javascript:;"> <img src="${ctx }/head/${user.headportriait }" class="layui-nav-img"> ${user.username} </a> <dl class="layui-nav-child"> <dd> <a href="javascript:;" id="grzx">个人中心</a> </dd> <dd> <a href="javascript:;" id="scj">收藏夹&关注</a> </dd> <dd> <a href="javascript:;" id="xgzl" ids="${user.ids }">修改资料</a> </dd> <dd> <a href="${ctx }/Usertable/exit.do">退出</a> </dd> </dl></li> <!-- 设置 --> <li class="layui-nav-item"> <li class="layui-nav-item"><a href="javascript:;" class="layui-icon"> � </a> <dl class="layui-nav-child"> <dd> <a href="javascript:;" id="theme"> <i class="layui-icon">�</i>主题 </a> </dd> </dl></li> </li> <!-- 设置 end --> </ul> </div> <!-- 侧边 --> <div class="layui-side layui-bg-black yincang layui-anim-scaleSpring"> <div class="layui-side-scroll"> <!-- 左侧导航区域(可配合layui已有的垂直导航) --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item" style="text-align: right;" id="yccb"> <i class="layui-icon" style="margin-right: 10px;">�</i> </li> <li class="layui-nav-item layui-nav-itemed"><a class="" href=""> 个人中心 </a> </li> <c:if test="${user.op <= 20}"> <li class="layui-nav-item" id="xsgl"><a href="javascript:;">用户管理</a> <dl class="layui-nav-child"> <dd> <a href="javascript:;" class="site-demo-active zym" data-type="tabChange" ym="student">用户信息</a> </dd> <!-- <dd> <a href="javascript:;" class="site-demo-active" data-type="tabChange" id="mhcx">模糊查询</a> </dd> --> </dl></li> <li class="layui-nav-item" id="wpgl"><a href="javascript:;">物资管理</a> <dl class="layui-nav-child"> <dd>s <a href="javascript:;" class="site-demo-active zym" data-type="tabChange" ym="goods"> 管理物品 </a> </dd> <!-- <dd> <a href="javascript:;" class="site-demo-active" data-type="tabChange" id="cxwp"> 模糊查询 </a> </dd> --> </dl></li> <li class="layui-nav-item" id="kqgl"><a href="javascript:;">考勤管理</a> <dl class="layui-nav-child"> <dd> <a href="javascript:;" class="site-demo-active zym" data-type="tabChange" ym="check"> 查看考勤情况 </a> </dd> </dl></li> </c:if> <c:if test="${user.op <= 1 }"> <li class="layui-nav-item" id="kqgl"><a href="javascript:;" id="Log">Log</a></li> </c:if> </ul> </div> </div> <!-- 侧边 end --> <div id="mincebian" class="layui-bg-black"> <ul class="layui-nav layui-nav-tree"> <li class="layui-nav-item"><a href="javascript:;" id="xxcb"> <i class="layui-icon">�</i> </a></li> <li class="layui-nav-item"><a href="javascript:;" id="min-cb1"> <i class="layui-icon">�</i> </a></li> <li class="layui-nav-item"><a href="javascript:;" id="min-cb2"> <i class="layui-icon">�</i> </a></li> <li class="layui-nav-item"><a href="javascript:;" id="min-cb3"> <i class="layui-icon">�</i> </a></li> <li class="layui-nav-item"><a href="javascript:;" id="min-cb4"> <i class="layui-icon">�</i> </a></li> </ul> </div> <div class="layui-body" id="my-body" style="overflow: hidden;"> <!-- 内容主体区域 --> <iframe class="my-filled_" src="${ctx }/Operation/userCenter.do" style="border: 0px; 100%;"></iframe> </div> <div class="layui-footer" id="my-footer"> <!-- 底部固定区域 --> © IPMS 管理集成系统 <div style="float: right;" class="xt-time"></div> </div> </div> </body>
opration.js
$(function() { $(window).resize(function() { // 到 多窄时 隐藏侧边栏 cebian(800, ".yincang"); }) $("#yccb").click(function() { clickcebian(".yincang"); }); $("#xxcb").click(function() { clickcebian2(".yincang"); }); // 打开 切换主题 界面 $("#theme").click(function() { var ht = "<ul id='ul_' class='layui-row layui-col-space10'>" + "<li class='layui-col-xs3 theme_' style='background-color: #009688;'></li>" + "<li class='layui-col-xs3 theme_' style='background-color: #5FB878;'></li>" + "<li class='layui-col-xs3 theme_' style='background-color: #393D49;'></li>" + "<li class='layui-col-xs3 theme_' style='background-color: #1E9FFF;'></li>" + "<li class='layui-col-xs3 theme_' style='background-color: #FFB800;'></li>" + "<li class='layui-col-xs3 theme_' style='background-color: #FF5722;'></li>" + "<li class='layui-col-xs3 theme_' style='background-color: #01AAED;'></li>" + "<li class='layui-col-xs3 theme_' style='background-color: #2F4056;'></li>" + "</ul>"; ymtc(ht, '315px', '400px'); }); // 点击 切换 主题 $("body").delegate(".theme_", "click", function() { var c = $(this).attr('style'); $("#czy-title").attr("style", c); //$(".layui-nav").attr("style", c); }); $("#min-cb1").mouseover(function(){ $(this).text("钻石"); }); $("#min-cb1").mouseout(function(){ $(this).html("<i class='layui-icon'>�</i>"); }); $("#min-cb2").mouseover(function(){ $(this).text("论坛"); }); $("#min-cb2").mouseout(function(){ $(this).html("<i class='layui-icon'>�</i>"); }); $("#min-cb3").mouseover(function(){ $(this).text("资料"); }); $("#min-cb3").mouseout(function(){ $(this).html("<i class='layui-icon'>�</i>"); }); $("#min-cb4").mouseover(function(){ $(this).text("小组"); }); $("#min-cb4").mouseout(function(){ $(this).html("<i class='layui-icon'>�</i>"); }); // 点击Log 显示 $("#Log").on('click',function(){ layer.open({ type: 2, title: '系统Log', maxmin: true, shadeClose: true, //点击遮罩关闭层 area : ['800px' , '520px'], content: '/IPMS/Operation/selectlog.do' }); }); $(".zym").click(function() { var ym = $(this).attr("ym"); qiehuan('/IPMS/Operation/tiao2.do?s='+ym); }); // 收藏夹 OR 关注 $("#scj").click(function() { qiehuan('/IPMS/Operation/focusOn.do'); }); //点击进入到流程页面 $("#lc").click(function() { qiehuan('/IPMS/Flow/Lczy.do'); }); //点击进入到项目页面 $("#pro").click(function() { qiehuan('/IPMS/projectmsg/zhuan.do'); }); //点击进入到流程页面 $("#group").click(function() { qiehuan('/IPMS/Grouptalk/ceshi.do'); }); //点击进入项目页 /*$("#pro").click(function() { var ym = $(this).attr("ym"); qiehuan('/IPMS/projectmsg/zhuan.do'); });*/ // 点击学生信息下的模糊查询 显示 $("body").delegate("#mhcx",'click',function(){ layer.open({ type: 2, title:'条件查询', maxmin: true, //shadeClose: true, //点击遮罩关闭层 area: ['460px','520px'], content:'/IPMS/Usertable/toFuzzySearchStu.do' ,cancel: function(index, layero){ // window.location.href="/IPMS/Operation/selectusers.do";//指定要跳转到的目标页面 // window.location.reload();//点击关闭刷新页面 } }); }); // 弹出修改资料 $("#xgzl").click(function(){ var ids = $(this).attr("ids"); layui.layer.open({ type: 2, area: ['700px', '450px'], fixed: false, //不固定 maxmin: true, content: '/IPMS/Operation/tiao2.do?data='+ids+'&s=redact2' }); }); });
OperationController
package com.ipms.controller; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import com.alibaba.fastjson.JSONObject; import com.ipms.model.Carenote; import com.ipms.model.Datadictory; import com.ipms.model.Diary; import com.ipms.model.Usertable; import com.ipms.service.CarenoteService; import com.ipms.service.CheckinService; import com.ipms.service.DataDictoryService; import com.ipms.service.DiaryService; import com.ipms.service.GoodsService; import com.ipms.service.LogService; import com.ipms.service.UsertableService; import com.ipms.util.Myutil; @Controller @RequestMapping("/Operation") public class OperationController { private static final String BASEPATH = "/WEB-INF/page/"; @Autowired private UsertableService us; @Autowired private GoodsService gs; @Autowired private CheckinService cs; @Autowired private DataDictoryService ds; @Autowired private DiaryService dis; @Autowired private LogService log; @Autowired private CarenoteService carenote; @RequestMapping("/tiao") public String tiao() { return BASEPATH +"operation"; } /** * 跳到那个iframe页面去 * @param s * @return */ @RequestMapping("/tiao2") public String tiao2(String s,Integer data,Model m) { Usertable u = new Usertable(); u.setParticulars(0); u.setOp(10); u.setIds(data); List<Map<String,Object>> list =us.selectusers(u); m.addAttribute("data", list); //数据字典 List<Datadictory> list2 = ds.selectall(); m.addAttribute("data2", list2); return BASEPATH +"/operationSubjoin/"+s; } /** * 查询 所有 用户 信息 * @param u 有传入 ids的时候 查询详细信息 无ids时 查询所有人 简略信息 * @return 返回 2个表的 List集合 *///,String username @ResponseBody @RequestMapping("/selectusers") public String selectusers(Usertable u , Integer limit ,Integer page) { int a = (page*limit)-limit; int b = page*limit; u.setParticulars(a); u.setOp(b); //u.setUsername(username); //System.err.println("每页条数 : "+limit +": 最大条数"+page*limit); System.out.println("==========---"+u); List<Map<String,Object>> list = us.selectusers(u); return Myutil.layuiTable(list); } /** * 模糊查询学生表 * 根据主键 查询 所有 用户 信息 * @param 传入 用户详情表外键集合,(每页条数,去第几页 没写) * @return 返回 2个表的 List集合 * */ @ResponseBody @RequestMapping("/selFuzzyUsers") // public String selFuzzyUsers(List<Integer> ids) { public String selFuzzyUsers(HttpServletRequest request) { System.out.println(request.getAttribute("ids")); Usertable u = new Usertable(); List<Integer> ids = (List<Integer>) request.getAttribute("ids"); // int a = (page*limit)-limit; //从第几条 // int b = page*limit; //到第几条 //u.setParticulars(a); //u.setOp(b); List<Map<String,Object>> list =null; for( int i = 0 ; i < ids.size() ; i++) { //内部不锁定,效率最高,但在多线程要考虑并发操作的问题... u.setParticulars(ids.get(i));//将遍历出来的外键放到实体Usertable表中,根据 list = us.selectusers(u); System.out.println(ids.get(i)); System.out.println(list); } //System.err.println("每页条数 :"+limit +": 最大条数"+page*limit); return Myutil.layuiTable(list); // } /** * 更新 用户信息 * @可更新列为 isaudit * @param u 传入 用户id , isaudit状态 0 or 1 * @return */ @ResponseBody @RequestMapping("/upuser") public String upuser(Usertable u) { JSONObject jo = new JSONObject(); boolean b = us.upuser(u); if(b) { jo.put("success", true); }else { jo.put("success", false); } return jo.toJSONString(); } /** * 查询 全部物品 * @param page 当前页面 * @param limit 每页数据量 * @return */ @ResponseBody @RequestMapping("/selectgoods") public String selectgoods(Integer page,Integer limit) { JSONObject jo = new JSONObject(); List<Map<String,Object>> list =gs.selectgoods(Myutil.fy(page, limit)); return Myutil.layuiTable(list); } /** * 查询 全部考勤记录 * @param page 当前页面 * @param limit 每页数据量 * @return */ @ResponseBody @RequestMapping("/selectcheck") public String selectcheck(Integer page,Integer limit) { JSONObject jo = new JSONObject(); List<Map<String,Object>> list =cs.selectcheck(Myutil.fy(page, limit)); return Myutil.layuiTable(list); } /** * 转到添加考勤 界面 * 查询 全部 人员 * @return */ @RequestMapping("/addcheck") public String addcheck(Model m) { List<Map<String, Object>> list = us.selectAll2(); m.addAttribute("data", list); return BASEPATH+"operationSubjoin/addcheck"; } /** * * @param userids 用户 ids * @param name '迟到' , '请假' , '旷工' * @param panduan 判断 (1 增加, 0 减少) * @return */ @ResponseBody @RequestMapping("/upcheck") public String upcheck(Integer userids,String name,Integer panduan) { JSONObject jo = new JSONObject(); // 查询 有无用户考勤信息 boolean b =cs.select(userids); if(b) { // 有 执行update boolean b1 = cs.upcheck(userids,name,panduan); if(b1) { jo.put("success", true); }else { jo.put("success", false); } }else { // 没有 时 首先创建 用户 考勤信息 boolean b2 = cs.insertcheck(userids); boolean b1 = cs.upcheck(userids,name,panduan); if(b1 && b2) { jo.put("success", true); }else { jo.put("success", false); } } return jo.toJSONString(); } /** * 转到 用户 中心 * @param hs * @param m * @return */ @RequestMapping("/userCenter") public String userCenter(HttpSession hs , Model m) { Usertable u = (Usertable)hs.getAttribute("user"); // 查询 对应的 大事记(随手记)(按时间排序) List<Diary> list =dis.select(u.getIds()); m.addAttribute("diary", list); return BASEPATH+"operationSubjoin/usercenter"; } /** * 添加新的随手记 * @param hs * @return */ @ResponseBody @RequestMapping("/insert") public String insert(HttpSession hs,Diary d ) { Usertable u = (Usertable)hs.getAttribute("user"); JSONObject jo = new JSONObject(); if(u != null ) { d.setUids(u.getIds()); boolean b =dis.insert(d); if(b) { jo.put("success", true); }else { jo.put("success", false); } }else { jo.put("success", false); jo.put("tishi", "登录过期 ? OR 没登录? 你是咋进来的?"); } return jo.toJSONString(); } @RequestMapping("/selectlog") public String selectlog(Model m) { List<Map<String,Object>> list =log.selectlog(); m.addAttribute("Log", list); return BASEPATH+"operationSubjoin/Log"; } /** * 关注收藏页 跳转 * @param m Model * @param hs Httpsession * @return */ @RequestMapping("/focusOn") public String focusOn(Model m,HttpSession hs) { // 关注收藏页 需要返回 当前登录用户的的 收藏信息 和关注人 Carenote c = new Carenote(); c.setuids(hquser(hs)); List<Map<String,Object>> list = carenote.select(c); m.addAttribute("data", list); return BASEPATH+"operationSubjoin/FocusOn"; } /** * 模糊查询 事件 返回 一个 * @param u * @return */ @ResponseBody @RequestMapping("/likeUser") public String likeUser(HttpSession hs,String username,Integer page,Integer limit) { // 查询结果 为 包含有 ids username op等级 是否关注的Listmap集合 Map<String , Object> map = Myutil.fy(page, limit); map.put("ids", hquser(hs)); map.put("username", "%"+username+"%"); List<Map<String,Object>> list = us.likeUser(map); return Myutil.layuiTable(list); } @ResponseBody @RequestMapping("/insertgz") public String insertgz(HttpSession hs,Integer uids,boolean b) { JSONObject jo = new JSONObject(); Carenote c = new Carenote(); c.setuids(hquser(hs)); c.setCareman(uids); if(b) { boolean b1 = carenote.insertgz(c); if(b1) { jo.put("success", true); }else { jo.put("success", false); } }else { boolean b1 = carenote.delgz(c); if(b1) { jo.put("success", true); }else { jo.put("success", false); } } return jo.toJSONString(); } /** * 获取 用户 * @param hs 需要session * @return */ public Integer hquser(HttpSession hs) { Usertable u = (Usertable)hs.getAttribute("user"); return u.getIds(); } }