ajax分頁查詢信息的通用方法
阿新 • • 發佈：2017-11-11
execute .sql sco 結果 tex warnings path lec 組合
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 分頁條件 --> <sql id="queryHaulLimit"> <if test="index!=null"> LIMIT #{index},#{currentCount} </if> </sql> <!--E 組裝分頁條件 --> </mapper>
結果:
後臺傳到前臺的JSON:
效果:
ajax分頁查詢信息的通用方法