mapper
/*查询所有商品*/ List<ProductInfo> selectAll();
<select id="selectAll" resultMap="BaseResultMap">
select
<include refid="Base_Column_List"></include>
from product_info
</select>
service
List<ProductInfo> selectAll();
PageInfo<ProductInfo> splitPage(int pageNo, int pageSize);
@Autowired
ProductInfoMapper productInfoMapper;
@Override
public List<ProductInfo> selectAll() {
return productInfoMapper.selectAll();
}
@Override
public PageInfo<ProductInfo> splitPage(int pageNo, int pageSize) {
PageHelper.startPage(pageNo,pageSize);
List<ProductInfo> list = productInfoMapper.selectAll();
PageInfo<ProductInfo> pageInfo= new PageInfo<>(list);
return pageInfo;
}
使用mybatis的分页插件 pageHelper分页 PageInfo对处理过的list进行分页
先分页 把查询的list集合放到PageInfo的list中
注意1:PageHelper.startPage(page, size);要放在查询语句之前
《PageHelper.startPage(page, size);只对之后的第一次查询生效》
注意2:PageInfo listPageInfo = new PageInfo<>(userlist);
ProductInfoAction
@Controller @RequestMapping("/prod") public class ProductInfoAction { @Autowired ProductInfoService productInfoService; @RequestMapping("/split.action") public String split(HttpServletRequest request){ PageInfo<ProductInfo> info = productInfoService.splitPage(1, 4); request.setAttribute("info",info); return "product"; }
前端
<c:forEach items="${info.list}" var="p">
<tr>
<td valign="center" align="center"><input type="checkbox" name="ck" id="ck" value="${p.pId}" onclick="ckClick()"></td>
<td>${p.pName}</td>
<td>${p.pContent}</td>
<td>${p.pPrice}</td>
<td><img width="55px" height="45px"
src="${pageContext.request.contextPath}/image_big/${p.pImage}"></td>
<td>${p.pNumber}</td>
<%--<td><a href="${pageContext.request.contextPath}/admin/product?flag=delete&pid=${p.pId}" onclick="return confirm('确定删除吗?')">删除</a>--%>
<%-- <a href="${pageContext.request.contextPath}/admin/product?flag=one&pid=${p.pId}">修改</a></td>--%>
<td>
<button type="button" class="btn btn-info "
onclick="one(${p.pId},${info.pageNum})">编辑
</button>
<button type="button" class="btn btn-warning" id="mydel"
onclick="del(${p.pId})">删除
</button>
</td>
</tr>
</c:forEach>
ajax分页翻页处理
<!--分页栏-->
<div id="bottom">
<div>
<nav aria-label="..." style="text-align:center;">
<ul class="pagination">
<li>
<%-- <a href="${pageContext.request.contextPath}/prod/split.action?page=${info.prePage}" aria-label="Previous">--%>
<a href="javascript:ajaxsplit(${info.prePage})" aria-label="Previous">
<span aria-hidden="true">«</span></a>
</li>
<c:forEach begin="1" end="${info.pages}" var="i">
<c:if test="${info.pageNum==i}">
<li>
<%-- <a href="${pageContext.request.contextPath}/prod/split.action?page=${i}" style="background-color: grey">${i}</a>--%>
<a href="javascript:ajaxsplit(${i})"
style="background-color: grey">${i}</a>
</li>
</c:if>
<c:if test="${info.pageNum!=i}">
<li>
<%-- <a href="${pageContext.request.contextPath}/prod/split.action?page=${i}">${i}</a>--%>
<a href="javascript:ajaxsplit(${i})">${i}</a>
</li>
</c:if>
</c:forEach>
<li>
<%-- <a href="${pageContext.request.contextPath}/prod/split.action?page=1" aria-label="Next">--%>
<a href="javascript:ajaxsplit(${info.nextPage})" aria-label="Next">
<span aria-hidden="true">»</span></a>
</li>
<li style=" margin-left:150px;color: #0e90d2;height: 35px; line-height: 35px;">总共 <font
style="color:orange;">${info.pages}</font> 页
<c:if test="${info.pageNum!=0}">
当前 <font
style="color:orange;">${info.pageNum}</font> 页
</c:if>
<c:if test="${info.pageNum==0}">
当前 <font
style="color:orange;">1</font> 页
</c:if>
</li>
</ul>
</nav>
</div>
<!--分页的AJAX实现--> <script type="text/javascript"> function ajaxsplit(page) { //异步ajax分页请求 $.ajax({ url:"${pageContext.request.contextPath}/prod/ajaxsplit.action", data:{"page":page}, type:"post", success:function () { //重新加载分页显示的组件table //location.href---->http://localhost:8080/admin/login.action $("#table").load("http://localhost:8080/Demo_war_exploded/admin/product.jsp #table"); } }) };
ajax翻页
PruductInfoAction
@ResponseBody @RequestMapping("/ajaxsplit") public void ajaxsplit(int page, HttpSession session){ //取得当前page参数的页面的数据 PageInfo info=productInfoService.splitPage(page,5); session.setAttribute("info",info); }