MAVEN jq+ajax实现简单分页

阅读：评论：0

MAVEN jq+ajax实现简单分页

jsp页面

<script src=".1.1/jquery.min.js"></script><!-- 如果使用本地路径，新手推荐使用绝对路径(不容易出错)-->
</head>
<body><input type="button" value="下一页" id="nextPage"><input type="button" value="上一页" id="prePage" disabled><table id="info"><thead><tr><td>id</td><td>姓名</td></tr></thead><tbody></tbody></table><input type="hidden"  id="currentPage"><!-- 存储当前页信息--><script type="text/javascript">// 页面初始化调用winload$(function() {winload(1,5);});$("#prePage").click(function(){winload(eval($("#currentPage").val())-1,5);});// 字符串转数字$("#nextPage").click(function(){winload(eval($("#currentPage").val())+1,5);});//查询数据并添加function winload(currentPage,currentCount) {$.ajax({url : "pageList.uu",//controller层type : "post",dataType : "json",data : {"currentPage" : currentPage,"currentCount" : currentCount},success : function(data) {$("#currentPage").val(data.currentPage);var s = "";$.each(data.list,function(i,e){s+='<tr><td>'+e.id+'</td><td>'+e.name+'</td></tr>';}); $("#info tbody").empty();//清空原有查询数据$("#info").append(s);if(eval($("#currentPage").val())==1){$("#prePage").attr("disabled","disabled");//第一页添加禁止点击}else{$("#prePage").removeAttr("disabled");}alPage==$("#currentPage").val()){$("#nextPage").attr("disabled","disabled");}else{$("#nextPage").removeAttr("disabled");}}})}</script>
</body>

impl层

public Map<String, Object> pageDel(int currentPage, Integer currentCount) {int startPage=(currentPage-1)*currentCount;//计算起始行数List<User> list = pageList(startPage, currentCount);//mysql查询当前页面数据int num = userTotalPage();//计算总用户条数int totalPage = (num + currentCount - 1) / currentCount;//计算总页数Map<String, Object> map = new HashMap<>();map.put("currentPage", currentPage);map.put("list", list);map.put("totalPage", totalPage);return map;//放置map json返回}

mapper xml里

<resultMap type="del.User" id="User"></resultMap>
<select id="userTotalPage" resultType="Integer">SELECT COUNT(*) FROM t_user</select>
<select id="pageList" resultMap="User">SELECT * from t_user LIMIT #{startPage},#{currentCount}</select>

新手，写的是最简单的一种，其实这个难得是页面上的追加append，其他的也还好

本文发布于:2024-01-28 00:39:34，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/17063735743599.html

上一篇：npm install时 node

下一篇：15.io流,递归

标签：分页简单 MAVEN jq ajax

留言与评论（共有 0 条评论）