Mybatis分页实践:PageHelper 和 pagination.js
2023-03-14 10:24:44 时间
先看下分页效果:
mybatis分页插件用的这个
https://github.com/pagehelper/Mybatis-PageHelper
jquery分页插件用的这个
https://github.com/gbirke/jquery_pagination
具体用法如下:
1、在相应页面引入pagination的css和js
2、页面合适位置引入 <div class="paginations"></div>
3、代码实现
var userId = $('#userId').val(); var schoolId=$('#schoolId').val(); var friendId; var isFirst=true; var pageNum = 1; var pageSize = 9; $(function(){ getSearchResult(pageNum,pageSize); }) // 发送好友申请 $('#addFriendSent1').on('click',function() { var mark = $('#addFriendInfo').val(); $.post('friendApply/sentAddFriendInfo', {"userId" : userId, "friendId" : friendId, "remark" : mark }, function(result) { if(result>0){ alert("发送成功!"); self.location.reload(); }else if(result==-1){ layer.msg("你们已经是好友了,请勿重复添加!"); }else{ layer.msg("发送失败!"); self.location.reload(); } }) $('#addFriendInfo').html(); }) function getSearchResult(pageNum,pageSize){ $.post("friendController/searchFriend",{"searchStr" : "","userRole" : "student","provinceCode" : "","cityCode" : "","countyCode" : "", "schoolId" : schoolId, "gradeCode" : "", "classId" : "","pageNum" : pageNum,"pageSize" : pageSize }, function(result) { var friendList = result.list; var total=result.total; $("#AddFriendListDiv").empty(); if(total==null||total<1){ $("#AddFriendListDiv").html('<div class="alert alert-info" role="alert">暂无相关内容</div>'); $(".paginations").empty(); return; } $.each(result.list,function(k, v) { // console.log(v) var logo = "", gender = "男"; if (v.userInfo.logo != null) logo = v.userInfo.logo; if (v.userInfo.sex != 1) gender = "女"; var htm = '<li><a href="user/ucIndex?id='+v.userInfo.id+'" target="_blank"><img src="'+logo+'"/></a><div class="info">' + '<div class="info-div">'+ v.userName+ '</div><div class="info-div info-gray">姓名:' + v.userInfo.ucName + '</div>' + '<div class="info-gray col-sm-8 info-num"><i class="glyphicon glyphicon-user"></i>' + gender + '</div>' + '<div class="col-sm-4 info-contoler"><a href="javascript:;" name="' + v.userName + '" class="addFriendInfoBTN" data-toggle="modal" data-target="#myModal-friend-info" >+ 好友</a></div></div></li>'; $("#AddFriendListDiv").append(htm); }) if(isFirst){ initPagination(total); isFirst=false; } $('.addFriendInfoBTN').on('click',function() { var userName = $(this).attr("name"); $.each(friendList,function(k,v) { if (v.userName == userName) { friendId = v.id; var logo = "", gender = "男"; if (v.userInfo.logo != null) logo = v.userInfo.logo; if (v.userInfo.sex != 1) gender = "女"; $("#friendInfo").html(""); $("#friendInfo").append('<div class="pull-left group-des-img"><img src="' + logo+ '" alt="" /></div><div class="pull-left group-des-info"><label>' + v.userName + '</label><p>'+ v.userInfo.ucName + '</p></div><p>性别:'+ gender+ '</p>'); } }) }) }) } /** * 初始化分页 */ function initPagination(total) { $(".paginations").pagination(total, { prev_text : ' « ', next_text : ' » ', items_per_page : pageSize, // 内容数量 num_display_entries : 5, // 中间页数 num_edge_entries : 1,// 省略号两边页数 is_show_skip_page : true, callback : pageslectCallback }); } /** * 分页处理 */ function pageslectCallback(page_index, jq) { if(!isFirst){ getSearchResult(page_index + 1, pageSize); } isFirst = false; return false; }
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的