ajax+json模态框中分页(spring+struts+mybatis+easyui分页插件)

0.业务需求:

点击每个数字的时候可以显示每个对应的详细记录。也就是得点击11的时候拿着开采部与C级去查询。

 

1.页面中的模态框与分页组件(注意:需要隐藏一个页号，点击分页插件的时候给隐藏的页号赋值，ajax再次请求的时候取页面的页号值)

                                    <!-- 隐藏查询条件的页号 -->
                                    <input type="hidden" name="currentPage" id="currentPage">

 

 

                    <!-- 模态框 统计详细信息-->
                    <div class="modal fade" id=dangerTongjiInfo tabindex="-1"
                        role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"
                                        aria-hidden="true">&times;</button>
                                    <!--关闭符号-->
                                    <!--标题-->
                                    <h3 class="modal-title">安全隐患列表</h3>
                                </div>
                                <form>
                                    <div class="modal-body">
                                        <div class="el_parperInfo" id="motaiinfo">
                                            <!-- 动态放入数据 -->
                                            <table class="table table-bordered  table-hover"
                                                id="dangerTable">
                                                <thead>
                                                    <tr>
                                                        <th>序号</th>
                                                        <th>检查单位</th>
                                                        <th>地点</th>
                                                        <th>发现人</th>
                                                        <th>隐患级别</th>
                                                        <th>责任单位</th>
                                                        <th>隐患状态</th>
                                                        <th>隐患类型</th>
                                                        <th>检查时间</th>
                                                    </tr>
                                                </thead>
                                            </table>
                                            <!--分页-->
                                            <!-- <div id="paginationIDU"></div> -->
                                        </div>

                                    </div>
                                    <div class="modal-footer">
                                        <!-- 分页组件 -->
                                        <div id="paginationIDU1"></div>
                                        <!-- <button type="button" class="btn btn-default"
                                            data-dismiss="modal">关闭</button> -->
                                    </div>

                                </form>

                            </div>
                            <!-- /.modal-content -->
                        </div>
                        <!-- /.modal -->
                    </div>

 

2.首先确定按钮的点击事件(还有一种方法就是jQuery动态获取每个数字的坐标然后取值)

 

处理按钮点击的ajax函数

　　　　解析:先请求数据(带着页面隐藏域中的页号，第一次为null，以后每次点击页号都带着对应的页号去请求数据)，将请求到的数据填充到模态框中的表格并开启模态框(开启模态框的同时要调用分页组件函数开启分页插件，将请求到的数据总数、当前页、页大小(可有可无)传到分页组件函数，动态设置分页组件参数)，点击页号的时候给页面中隐藏的页号赋值，然后再次调用ajax请求数据。

/**
 * 统计JS
 */
// 获取数据
function queryNum(checkunit, dangergrade, type) {
    $.ajax({
        url : "/danger/queryDangerTongji.action",
        async : true,
        data : {
            "currentPage" : $("#currentPage").val(), // 查询隐藏的页号
            "checkunit" : checkunit,
            "dangergrade" : dangergrade,
            "type" : type
        },
        dataType : "text",
        type : "POST",
        success : showTable,
        error : function() {
            alert("请求失败！");
        }

    });
}

/**
 * 显示表格
 */
function showTable(data) {
    var result = eval("(" + data + ")");
    var dangerList = result.productList;
    // 清空表格
    $("#dangerTable  tr:not(:first)").remove();
    if (dangerList != null) {
        // 在表格中添加数据
        for (var i = 0; i < dangerList.length; i++) {
            var index = i + 1;
            $("#dangerTable").append(
                    "<tr><td>"
                            + (index + (result.currentPage - 1) * 6)
                            + "</td><td>"
                            + dangerList[i].checkunit
                            + "</td><td>"
                            + dangerList[i].address
                            + "</td><td>"
                            + dangerList[i].findperson
                            + "</td><td>"
                            + dangerList[i].dangergrade
                            + "</td><td>"
                            + dangerList[i].unit
                            + "</td><td>"
                            + dangerList[i].dangerstatus
                            + "</td><td>"
                            + dangerList[i].type
                            + "</td><td>"
                            + Format(new Date(dangerList[i].findtime),
                                    "yy-MM-dd HH:mm") + "</td></tr>");
        }
    }
    /**
     * 显示分页
     */
    var currentPage = result.currentPage; // 当前页
    var totalCount = result.totalCount; // 数据总数
    var checkunit = result.checkunit; // 数据总数
    var type = result.type; // 数据总数
    var dangergrade = result.dangergrade; // 数据总数
    // 开启模态框
    $('#dangerTongjiInfo').modal('show');

    page(currentPage, totalCount, checkunit, type, dangergrade);

}

/**
 * 模态框中的分页
 */
function page(currentPage, totalCount, checkunit, type, dangergrade) {
    // 修改分页的基本属性
    $('#paginationIDU1').pagination(
            {
                // 组件属性
                "total" : totalCount,// 数字 当分页建立时设置记录的总数量 1
                "pageSize" : 6,// 数字 每一页显示的数量 10
                "pageNumber" : currentPage,// 数字 当分页建立时，显示的页数 1
                "pageList" : [ 6 ],// 数组 用户可以修改每一页的大小，
                // 功能
                "layout" : [ 'list', 'sep', 'first', 'prev', 'manual', 'next',
                        'last', 'links' ],
                "onSelectPage" : function(pageNumber, b) {
                    // 给页面中隐藏的页号赋值(便于在ajax第二次时候获取页号)
                    $("#currentPage").val(pageNumber);
                    // 带着页号调用上面的ajax函数再次请求数据
                    queryNum(checkunit, dangergrade, type);
                }
            });
}

 

 

3.接收请求的Action

struts.xml配置(如果不用框架可以自己用GSON解析)

Action层的java代码(接收请求的参数与带着参数 向service层请求数据，写回到ajax需要包括数据集合，页号，满足条件的总数)

package danger.action.queryView;

import java.sql.SQLException;
import java.util.HashMap;
import java.util.Map;

import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.opensymphony.xwork2.ActionSupport;

import danger.service.queryView.TongjiDangerService;
import danger.utils.ValidateCheck;

/**
 * 统计之后点击每个数字的时候用
 * 
 * @author QizoLiQiang
 * @time 2017年9月7日下午12:09:31
 */
@SuppressWarnings({ "rawtypes", "unchecked", "serial", "unused" })
/*
 * @Controller
 * 
 * @Scope("prototype")
 */
public class TongjiDangerAction extends ActionSupport {
    Logger logger = Logger.getLogger(TongjiDangerAction.class);
    private Map<String, Object> result;
    private String currentPage;
    private String currentCount;
    private String checkunit;// 检查单位
    private String dangergrade;// 隐患级别
    private String startTime; // 月表查询的开始时间
    private String endTime; // 月表查询的结束时间
    private String type;// 隐患类型

    @Autowired
    private TongjiDangerService tongjiDangerService;

    @Override
    public String execute() {
        Map<String, Object> condition = new HashMap();
        result = new HashMap();
        // 封装条件
        condition = generateCondition(condition);
        try {// 获取总数与数据
            Map<String, Object> dangerTongji = tongjiDangerService.findDangerCountPageByCondition(
                    Integer.valueOf(currentPage), Integer.valueOf(currentCount), condition);
            // 将总数与数据加入map中返回
            result.put("productList", dangerTongji.get("productList"));
            result.put("totalCount", dangerTongji.get("totalCount"));
            result.put("currentPage", dangerTongji.get("currentPage"));
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            logger.error(e.getMessage(), e);
        }
        return "success";
    }

    private Map<String, Object> generateCondition(Map<String, Object> condition) {
        if (currentPage == null || "".equals(currentPage.trim())) {
            currentPage = "1";
            // 当前页号写回到页面
            result.put("currentPage", Integer.valueOf(currentPage));
        }
        if (currentCount == null || "".equals(currentCount.trim())) {
            currentCount = "6";
        }
        if (ValidateCheck.isNotNull(checkunit)) {
            if (!"0".equals(checkunit)) {
                condition.put("checkunit", checkunit);
                result.put("checkunit", checkunit);
            }
        }
        if (ValidateCheck.isNotNull(startTime)) {
            condition.put("startTime", startTime + " 00:00:00");
            result.put("startTime", startTime);
        }
        if (ValidateCheck.isNotNull(endTime)) {
            condition.put("endTime", endTime + " 23:59:59");
            result.put("endTime", endTime);
        }
        if (ValidateCheck.isNotNull(dangergrade)) {
            condition.put("dangergrade", dangergrade);
            result.put("dangergrade", dangergrade);
        }
        if (ValidateCheck.isNotNull(type)) {
            condition.put("type", type);
            result.put("type", type);
        }
        return condition;
    }

    public Map<String, Object> getResult() {
        return result;
    }

    public void setResult(Map<String, Object> result) {
        this.result = result;
    }

    public Logger getLogger() {
        return logger;
    }

    public void setLogger(Logger logger) {
        this.logger = logger;
    }

    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 getCheckunit() {
        return checkunit;
    }

    public void setCheckunit(String checkunit) {
        this.checkunit = checkunit;
    }

    public String getDangergrade() {
        return dangergrade;
    }

    public void setDangergrade(String dangergrade) {
        this.dangergrade = dangergrade;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public TongjiDangerService getTongjiDangerService() {
        return tongjiDangerService;
    }

    public void setTongjiDangerService(TongjiDangerService tongjiDangerService) {
        this.tongjiDangerService = tongjiDangerService;
    }

    public String getStartTime() {
        return startTime;
    }

    public void setStartTime(String startTime) {
        this.startTime = startTime;
    }

    public String getEndTime() {
        return endTime;
    }

    public void setEndTime(String endTime) {
        this.endTime = endTime;
    }

}

 4.服务层代码:（首先查询满足条件的总数，然后根据传下来的页号计算limit索引的起始索引index，带着页大小currentCount去请求数据）

package danger.service.impl.queryView;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import danger.bean.dangerManage.Danger;
import danger.mapper.dangerManage.custom.DangerCustomMapper;
import danger.service.queryView.TongjiDangerService;

@Service
public class TongjiDangerServiceImpl implements TongjiDangerService {

    @Autowired
    private DangerCustomMapper dangerCustomMapper;

    @Override
    public int getCountByCondition(Map<String, Object> condition) throws SQLException {
        // TODO Auto-generated method stub
        return dangerCustomMapper.getDangerCountByCondition(condition);
    }

    @Override
    public List<Danger> findDangersByCondition(int currentPage,int currentCount,Map<String, Object> condition) throws SQLException {
        //获取到总数
        int totalCount = 0;
        totalCount = this.getCountByCondition(condition);
        // 4、总页数private int totalPage;
        /*
         * 总条数 当前页显示的条数 总页数 10 4 3 11 4 3 12 4 3 13 4 4
         * 
         * 公式：总页数=Math.ceil(总条数/当前显示的条数)
         * 
         */
        // 5、每页显示的数据private List<T> productList = new ArrayList<T>();
        /*
         * 页数与limit起始索引的关系 例如 每页显示4条 页数 其实索引 每页显示条数 1 0 4 2 4 4 3 8 4 4 12 4
         * 
         * 索引index = (当前页数-1)*每页显示的条数
         * 
         */
        int index = (currentPage - 1) * currentCount;
        condition.put("index", index);
        condition.put("currentCount", currentCount);
        return dangerCustomMapper.findDangerByCondition(condition);
    }

    /**
     * 返回页号，总数，数据集合
     */
    @Override
    public Map<String, Object> findDangerCountPageByCondition(int currentPage,int currentCount,Map<String, Object> condition) throws SQLException {
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("totalCount", this.getCountByCondition(condition));
        result.put("productList", this.findDangersByCondition(currentPage,currentCount,condition));
        result.put("currentPage", currentPage);
        return result;
    }

}

 

 5.Mapper层接口与xml

java接口

package danger.mapper.dangerManage.custom;

import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import danger.bean.dangerManage.Danger;

public interface DangerCustomMapper {

    /**
     * 组合条件查询隐患
     * 
     * @param map
     * @return
     * @throws Exception
     */
    public List<Danger> findDangerByCondition(Map<String, Object> map) throws SQLException;

    /**
     * 根据条件查询满足条件的总数
     * 
     * @param map
     * @return
     * @throws Exception
     */
    public Integer getDangerCountByCondition(Map<String, Object> map) throws SQLException;

    /**
     * 统计信息的时候根据开始时间和结束时间，单位和级别，类型查询满足条件的总数
     * 
     * @param map
     *            开始时间，结束时间，单位，级别，类型查询
     * @return
     * @throws SQLException
     */
    public Integer getDangerCountByCondition2(Map<String, Object> map) throws SQLException;

    /**
     * 统计信息的时候根据开始时间和结束时间，单位和级别，类型查询满足条件的记录
     * 
     * @param map
     *            开始时间，结束时间，单位，级别，类型查询
     * @return
     * @throws Exception
     */
    public List<Danger> findDangerByCondition2(Map<String, Object> map) 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">

<!-- namespace命名空间，作用就是对sql进行分类化管理，理解sql隔离 注意：使用mapper代理方法开发，namespace有特殊重要的作用 -->
<mapper namespace="danger.mapper.dangerManage.custom.DangerCustomMapper">

    <!-- 查询分页 -->
    <sql id="query_page_limit">
        <if test="index!=null">
            LIMIT #{index},#{currentCount}
        </if>
    </sql>
    <!-- 查询隐患的条件 -->
    <sql id="query_danger_where">
        <if test="checkunit!=null">
            and checkunit=#{checkunit}
        </if>
        <if test="manager!=null">
            and manager=#{manager}
        </if>
        <if test="startTime!=null">
            and findTime > #{startTime}
        </if>
        <if test="endTime!=null">
            and findTime&lt;#{endTime}
        </if>
        <if test="dangergrade!=null">
            and dangergrade=#{dangergrade}
        </if>
        <if test="address!=null">
            and address like '%${address}%'
        </if>
        <if test="content!=null">
            and content like '%${content}%'
        </if>
        <if test="type!=null">
            and type=#{type}
        </if>
        <if test="dangerstatus!=null">
            and dangerstatus=#{dangerstatus}
        </if>
    </sql>

    <select id="findDangerByCondition" resultType="danger.bean.dangerManage.Danger"
        parameterType="hashmap">
        SELECT * FROM `danger`.`danger`
        <where>
            <include refid="query_danger_where"></include>
        </where>
        <include refid="query_page_limit"></include>
    </select>

    <select id="getDangerCountByCondition" resultType="int"
        parameterType="hashmap">
        SELECT count(dangerId) FROM `danger`.`danger`
        <where>
            <include refid="query_danger_where"></include>
        </where>
    </select>




</mapper>

 

 

效果:

 

 

 

 

总结:

　　ajax+json分页同普通的分页一样，需要页号，页大小，数据集合，总数四个参数，在action层将四个参数存入map中转为json传回去，jQuery遍历数组集合向表格中添加数据(前提是先清除除表头以外的数据)。页号，数据总数没当前页等参数需要传到分页插件的开启函数中，在分页插件中点击页号的时候给页面隐藏的页号设置值同时再次调用ajax请求数据。

　　一个重要的JS传递参数的思想就是在页面隐藏一个文本框，一个函数赋值完另一个函数取值。