1. 程式人生 > >ajax分頁查詢信息的通用方法

ajax分頁查詢信息的通用方法

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分頁查詢信息的通用方法