ajax分页查询信息的通用方法
Posted Qiao_Zhi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax分页查询信息的通用方法相关的知识，希望对你有一定的参考价值。
1.页面准备分页的表格与分页div
同时需要在查询条件表单中准备隐藏当前页与页大小的文本框
<div class="container-fluid"> <div class="panel panel-default"> <!--菜单连接标题--> <div class="panel-heading"> <span>大修管理</span><span>>大修信息管理</span> </div> <div class="el_main"> <!--内容--> <div class="el_qlmContent"> <!--索引--> <div class="row el_queryBox"> <form id="haulQueryForm"> <!--隐藏当前页与页大小 --> <input type="hidden" name="currentPage" id="currentPage"> <input type="hidden" name="currentCount" id="currentCount"> <div class="row"> <div class="col-md-3 el_qlmQuery"> <div class="input-group" role="toolbar"> <span class="el_spans">大修名称：</span> <input type="text" class="form-control" name="bigName" /> </div> </div> <div class="col-md-3 el_qlmQuery"> <div class="input-group" role="toolbar"> <span class="el_spans">大修时间：</span> <input type="text" name="startMonth" id="test" class="wicon form-control" readonly /> </div> </div> <div class="col-md-3 el_qlmQuery"> <div class="input-group" role="toolbar"> <span class="el_spans">大修状态：</span> <select class="selectpicker form-control" name="bigStatus" title="请选择"> <option value="">--请选择--</option> <option value="未开始">未开始</option> <option value="进行中">进行中</option> <option value="已结束">已结束</option> </select> </div> </div> </div> <!--提交查询按钮--> <button type="reset" class="btn btn-default el_queryButton0 btn-sm">清空</button> <button type="button" id="haulQueryButton" class="btn btn-default el_queryButton btn-sm">查询</button> </form> </div> <!--结束 查询表单提交--> <!--显示内容--> <h4 class="el_mainHead">大修信息</h4> <div class="panel panel-default el_Mainmain"> <!--按钮面板--> <div class="panel-body"> <div class="panel panel-default"> <div class="panel-body el_MainxiaoMain"> <div class="el_topButton"> <button class="btn btn-primary" onclick="el_addOverhaul()"> 创建大修</button> </div> </div> </div> <!-- 表格 内容都提取到json里边 --> <table class="table table-hover table-bordered" id="newsTable"> <thead> <tr> <th>序号</th> <th>大修名称</th> <th>时间</th> <th>状态</th> <th width="350">操作</th> </tr> </thead> <tbody id="haulTbody"> </tbody> </table> <!--分页--> <div id="paginationIDU" class="paginationID"></div> </div> </div>
2.JS代码:
解释:点击查询的时候将页号清空(这个有时候容易忘)，带着组合条件去后台查询，查询成功后将数据填充到表格之后显示分页组件。点击分页组件的页号与上下页的时候动态设置页面中隐藏域的值，同时调用查询方法。
/** * 页面初始化函数 */ $(function() { // 页面初始化查询大修信息 queryHaulFun(); // 查询的点击事件 $("#haulQueryButton").click(function() { $("#currentPage").val("");// 清空页数 queryHaulFun(); }); }); /** *S 分页查询大修信息*** */ // 查询大修 var queryHaulFun = function() { $.ajax({ url : contextPath + "/findPageHaul.action", data : $("#haulQueryForm").serialize(), dataType : "JSON", async : true, type : "POST", success : showHaulTable, error : function() { alert("查询大修失败!!!"); } }); } // 显示大修分页信息到表格 function showHaulTable(response) { $("#haulTbody").html("");// 清空表格 var haulinfos = response.pageBean.productList;// 获取到大修JSON对象 var currentCount = response.pageBean.currentCount;// 页大小 var totalCount = response.pageBean.totalCount;// 页总数 var currentPage = response.pageBean.currentPage;// 当前页 for (var i = 0, length_1 = haulinfos.length; i < length_1; i++) { // 填充表格 $("#haulTbody") .append( \'<tr><td>\' + (parseInt(currentCount) * parseInt(currentPage - 1) + (i + 1)) + \'</td><td>\' + haulinfos[i].bigname + \'</td><td>\' + haulinfos[i].bigbegindate + \' 到 \' + haulinfos[i].bigenddate + \'</td><td>\' + haulinfos[i].bigstatus + \'</td><td>\' + \'<a href="<%=path%>/view/overhaul/overhaulInfo.jsp">详情</a>\' + \'<a href="javascript:void(0)" onclick="el_modifyOverhaul()">修改</a>\' + \'<a href="javascript:void(0)" onclick="delcfmOverhaul()">删除</a>\' + \'</td></tr>\'); } // 动态开启分页组件 page(currentPage, totalCount, currentCount); } // 显示分页 function page(currentPage, totalCount, currentCount) { // 修改分页的基本属性 $(\'#paginationIDU\').pagination( { // 组件属性 "total" : totalCount,// 数字 当分页建立时设置记录的总数量 1 "pageSize" : currentCount,// 数字 每一页显示的数量 10 "pageNumber" : currentPage,// 数字 当分页建立时，显示的页数 1 "pageList" : [ 8 ],// 数组 用户可以修改每一页的大小， // 功能 "layout" : [ \'list\', \'sep\', \'first\', \'prev\', \'manual\', \'next\', \'last\', \'links\' ], "onSelectPage" : function(pageNumber, pageSize) { $("#currentPage").val(pageNumber); $("#currentCount").val(pageSize); // 查询大修 queryHaulFun(); } }); } /** *E 分页查询大修信息*** */
后台代码
工具类: PageBean.java
package cn.xm.exam.utils; /** * 分页工具类 */ import java.util.ArrayList; import java.util.List; public class PageBean<T> { // 当前页 private int currentPage; // 当前页显示的条数 private int currentCount; // 总条数 private int totalCount; // 总页数 private int totalPage; // 每页显示的数据 private List<T> productList = new ArrayList<T>(); public int getCurrentPage() { return currentPage; } public void setCurrentPage(int currentPage) { this.currentPage = currentPage; } public int getCurrentCount() { return currentCount; } public void setCurrentCount(int currentCount) { this.currentCount = currentCount; } public int getTotalCount() { return totalCount; } public void setTotalCount(int totalCount) { this.totalCount = totalCount; } public int getTotalPage() { return totalPage; } public void setTotalPage(int totalPage) { this.totalPage = totalPage; } public List<T> getProductList() { return productList; } public void setProductList(List<T> productList) { this.productList = productList; } @Override public String toString() { return "PageBean [currentPage=" + currentPage + ", currentCount=" + currentCount + ", totalCount=" + totalCount + ", totalPage=" + totalPage + ", productList=" + productList + "]"; } }
3.Action代码:
首先组装查询条件(对数据进行初始化处理)，调用service层进行查询,返回的索引信息都封装在pageBean对象中，将PageBean装入map中转为JSON传到前台。
package cn.xm.exam.action.haul; import java.sql.SQLException; import java.util.HashMap; import java.util.Map; import javax.annotation.Resource; import org.apache.log4j.Logger; import org.springframework.context.annotation.Scope; import org.springframework.stereotype.Controller; import com.opensymphony.xwork2.ActionSupport; import cn.xm.exam.bean.haul.Haulinfo; import cn.xm.exam.service.haul.HaulinfoService; import cn.xm.exam.utils.PageBean; import cn.xm.exam.utils.ValidateCheck; /** * 查询大修的Action * * @author QiaoLiQiang * @time 2017年11月10日下午7:45:09 */ @Controller @Scope("prototype") @SuppressWarnings("all") public class FindHaulAction extends ActionSupport { private Logger logger = Logger.getLogger(FindHaulAction.class);// 日志记录器 private Map<String, Object> response;// 用于包装返回结果的map @Resource private HaulinfoService haulinfoService; private String currentPage;// 当前页 private String currentCount;// 页大小 private String bigName;// 大修名称 private String bigStatus;// 大修状态 private String startMonth;// 创建月份 @Override public String execute() { response = new HashMap<String, Object>(); Map<String, Object> condition = generateQueryHaulCondition(); PageBean<Haulinfo> pageBean = null; try { pageBean = haulinfoService.getHaulinfoPageByCondition(Integer.valueOf(currentPage), Integer.valueOf(currentCount), condition); } catch (NumberFormatException e) { logger.error("数字格式化异常", e); } catch (SQLException e) { logger.error("查询大修SQL异常", e); } response.put("pageBean", pageBean); return SUCCESS; } /** * 组装查询条件 * * @param condition * @return */ private Map<String, Object> generateQueryHaulCondition() { Map<String, Object> condition = new HashMap<String, Object>(); if (ValidateCheck.isNull(currentCount)) { currentCount = "8"; } if (ValidateCheck.isNull(currentPage)) { currentPage = "1"; } if (ValidateCheck.isNotNull(bigName)) { condition.put("bigName", bigName); } if (ValidateCheck.isNotNull(bigStatus)) { condition.put("bigStatus", bigStatus); } if (ValidateCheck.isNotNull(startMonth)) { condition.put("startMonth", startMonth); } return condition; } // get set public Map<String, Object> getResponse() { return response; } public void setResponse(Map<String, Object> response) { this.response = response; } public String getCurrentPage() { return currentPage; } public void setCurrentPage(String currentPage) { this.currentPage = currentPage; } public String getCurrentCount() { return currentCount; } public void setCurrentCount(String currentCount) { this.currentCount = currentCount; } public String getBigName() { return bigName; } public void setBigName(String bigName) { this.bigName = bigName; } public String getBigStatus() { return bigStatus; } public void setBigStatus(String bigStatus) { this.bigStatus = bigStatus; } public String getStartMonth() { return startMonth; } public void setStartMonth(String startMonth) { this.startMonth = startMonth; } }
4.Service层代码:
将当前页，页大小，页总数，总记录数，数据集合装入PageBean返回给Action。(满足条件的总数需要根据条件查出，之后计算出总页数，并根据当前页与页大小计算起始值并装入条件map中传到mapper层查询数据集合)
@Override public PageBean<Haulinfo> getHaulinfoPageByCondition(int currentPage, int currentCount, Map<String, Object> condition) throws SQLException { PageBean<Haulinfo> pageBean = new PageBean<Haulinfo>(); pageBean.setCurrentCount(currentCount);// 设置页大小 pageBean.setCurrentPage(currentPage);// 设置当前页 int total = 0; int totalCount = haulinfoCustomMapper.getHaulinfoTotalByCondition(condition);// 查询满足条件的总数 pageBean.setTotalCount(totalCount);// 设置总记录数 int totalPage = (int) Math.ceil(1.0 * totalCount / currentCount); pageBean.setTotalPage(totalPage);// 设置总页数 /****** * 计算起始值 * 页数 起始值 页大小 * 1 0 8 * 2 8 16 *******/ int index = (currentPage - 1) * currentCount;// 起始值 condition.put("index", index); condition.put("currentCount", currentCount); List<Haulinfo> haulinfos = haulinfoCustomMapper.getHaulinfoslByCondition(condition); pageBean.setProductList(haulinfos);//设置数据集合 return pageBean; }
5.Mapper层代码
mapper接口:
package cn.xm.exam.mapper.haul.custom; import java.sql.SQLException; import java.util.List; import java.util.Map; import cn.xm.exam.bean.haul.Haulinfo; /** * 大修基本信息mapper * * @author QiaoLiQiang * @time 2017年11月10日下午12:23:15 */ public interface HaulinfoCustomMapper { /** * 查询满足条件的大修总数 * * @param condition * 条件 * @return * @throws SQLException */ public int getHaulinfoTotalByCondition(Map<String, Object> condition) throws SQLException; /** * 组合条件查询大修信息用于分页显示大修 * * @param condition * @return * @throws SQLException */ public List<Haulinfo> getHaulinfoslByCondition(Map<String, Object> condition) throws SQLException; }
mapper.xml:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > <mapper namespace="cn.xm.exam.mapper.haul.custom.HaulinfoCustomMapper"> <!--S 查询分页总数 --> <select id="getHaulinfoTotalByCondition" parameterType="hashmap" resultType="_int"> SELECT COUNT(bigId) FROM haulinfo <where> <include refid="queryHaulWhere"></include> </where> </select> <!--E 查询分页总数 --> <!--S 分页查询大修 --> <select id="getHaulinfoslByCondition" resultType="cn.xm.exam.bean.haul.Haulinfo" parameterType="hashmap"> SELECT * FROM haulinfo <where> <include refid="queryHaulWhere"></include> </where> <include refid="queryHaulLimit"></include> </select> <!--E 分页查询大修 --> <!--S 组装查询条件 --> <sql id="queryHaulWhere"> <if test="bigName!=null"> and bigName LIKE \'%${bigName}%\' </if> <if test="bigStatus!=null"> and bigStatus=#{bigStatus} </if> <if test="startMonth!=null"> and DATE_FORMAT(bigCreateDate,\'%Y-%m\')=#{startMonth} </if> </sql> <!--E 组装查询条件 --> <!--S 分页条件 --> <以上是关于ajax分页查询信息的通用方法的主要内容，如果未能解决你的问题，请参考以下文章bos 第4 (区域excel批量导入区域通用分页查询分区的添加分区多条件分页查询分区导出excel)
如何用ajax写分页查询（以留言信息为例）-----2017-05-17
JAVAEE——BOS物流项目04：学习计划datagrid分页查询批量删除修改功能
关键词搜索&分页功能的前端代码(ajax + jQuery)
基于Spring+SpringMVC+MyBatis开发书评网图书分页查询模块采用Ajax动态加载图书信息和实现图书多条件动态查询