十、市场活动-分页查询

奋斗吧

擅长邻域：未填写

2023-04-11 18:23:16 213浏览

①、当市场活动主页面加载完成之后,显示所有数据的第一页;②、用户在市场活动主页面填写查询条件,点击"查询"按钮,显示所有符合条件的数据的第一页，保持每页显示条数不变③、实现翻页功能.*在市场活动主页面,显示市场活动列表和记录的总条数*默认每页显示条数:10。

功能需求

①、当市场活动主页面加载完成之后,显示所有数据的第一页;

②、用户在市场活动主页面填写查询条件,点击"查询"按钮,显示所有符合条件的数据的第一页，保持每页显示条数不变

③、实现翻页功能.

*在市场活动主页面,显示市场活动列表和记录的总条数

*默认每页显示条数:10

流程图

一、ActivityMapper

1.ActivityMapper接口

    /**
     * 查询市场活动的列表
     */
    List<Activity> selectActivityByConditionForPage(Map<String,Object> map);

    /**
     * 查询市场活动的条数
     */
    int selectCountOfActivityByCondition(Map<String,Object> map);

2.ActivityMapper映射文件

【起别名】：①tbl_activity---a ②tbl_user---u*表示

查询的字段有：

a.id（删除，修改根据选中的id）
u1.name as owner(所有者)
a.name（名称）
a.start_date（活动开始时间）
a.end_date,（活动结束时间）
a.cost,（活动花费）
a.description,（活动描述）
a.create_time,（活动创建时间）
u2.name as create_by（活动的创建者）
a.edit_time，（修改活动时间）
u3.name as edit_by（修改者）

使用外连接内连接进行多表查询
通过<where>标签进行条件拼接
order by *** desc 进行降序
limit a,b 从起点a开始，返回b条数据

【注意】#{***}要和map的key名称一致

    <!-- List<Activity> selectActivityByConditionForPage(Map<String,Object> map)；分页查询-->
    <select id="selectActivityByConditionForPage" resultMap="BaseResultMap">
        select a.id,u1.name as owner,a.name,a.start_date,a.end_date,a.cost,a.description,a.create_time,
        u2.name as create_by,a.edit_time,u3.name as edit_by
        from tbl_activity a
        join tbl_user u1 on a.owner=u1.id
        join tbl_user u2 on a.create_by=u2.id
        left join tbl_user u3 on a.edit_by=u3.id
        <where>
            <if test="name!=null and name!=''">
                and a.name like "%"#{name}"%"
            </if>
            <if test="owner!=null and owner!=''">
                and u1.name like "%"#{owner}"%"
            </if>
            <if test="startDate!=null and startDate!=''">
                and a.start_date&gt;=#{startDate}
            </if>
            <if test="endDate!=null and endDate!=''">
                and a.end_date&lt;=#{endDate}
            </if>
        </where>
        order by a.create_time desc
        limit #{beginNo},#{pageSize}
    </select>

返回符合条件的记录数

   <select id="selectCountOfActivityByCondition" resultType="java.lang.Integer">
        select count(*)
        from tbl_activity a
        join tbl_user u1 on a.owner=u1.id
        join tbl_user u2 on a.create_by=u2.id
        left join tbl_user u3 on a.edit_by=u3.id
        <where>
            <if test="name!=null and name!=''">
                and a.name like "%"#{name}"%"
            </if>
            <if test="owner!=null and owner!=''">
                and u1.name like "%"#{owner}"%"
            </if>
            <if test="startDate!=null and startDate!=''">
                and a.start_date&gt;=#{startDate}
            </if>
            <if test="endDate!=null and endDate!=''">
                and a.end_date&lt;=#{endDate}
            </if>
        </where>
    </select>

二、ActivityService

1.ActivityService接口

	/**
	 * 分页查询市场活动
	 */
	List<Activity> queryActivityByConditionForPage(Map<String,Object> map);

	/**
	 * 符合市场活动的条数
	 */
	int queryCountOfActivityByCondition(Map<String,Object> map);

2.ActivityServiceImpl实现类，实现接口，调用mapper方法

	@Override
	public List<Activity> queryActivityByConditionForPage(Map<String, Object> map) {
		return activityMapper.selectActivityByConditionForPage(map);
	}

	@Override
	public int queryCountOfActivityByCondition(Map<String, Object> map) {
		return activityMapper.selectCountOfActivityByCondition(map);
	}

三、ActivityController

【分析】：

1.ajax异步请求，返回的是json对象，，所以方法头是类型是Object，并且用@ResponseBody修饰，返回的map类型转换为json

2.方法形参要和前端ajax的data方法名key保持一致，否则无法匹配

【controller功能】

1.封装参数

2.调用Service

3.生成响应信息

	/**
	 * 根据条件，分页
	 */
	@RequestMapping("/workbench/activity/queryActivityByConditionForPage.do")
	public @ResponseBody Object queryActivityByConditionForPage(String name,String owner,String startDate,String endDate,int pageNo,int pageSize){
		//封装参数
		Map<String,Object> map = new HashMap<>();
		map.put("name",name);
		map.put("owner",owner);
		map.put("startDate",startDate);
		map.put("endDate",endDate);
		map.put("beginNo",(pageNo-1)*pageSize);
		map.put("pageSize",pageSize);
		//调用Service
		List<Activity> activityList = activityService.queryActivityByConditionForPage(map);
		int totalRows = activityService.queryCountOfActivityByCondition(map);
		//生成响应信息
		Map<String,Object> retMap = new HashMap<>();
		retMap.put("activityList",activityList);
		retMap.put("totalRows",totalRows);
		return retMap;
	}

四、前端workbench/activity/index.jsp

【功能】

1.查询：当市场活动主页面加载完成，显示所有数据的第一页和总条数

①在js收集查询的参数

                var name = $("#query-name").val();
                var owner = $("#query-owner").val();
                var startDate = $("#query-startDate").val();
                var endDate = $("#query-endDate").val();
                var pageNo = 1;//页码
                var pageSize = 10;//显示的数量

②ajax发送请求

url是请求的controller

data:是封装的数据 key要和mapper的形参保持一致

 //2.2发送请求
                $.ajax({
                    url: 'workbench/activity/queryActivityByConditionForPage.do',
                    data: {
                        name: name,
                        owner: owner,
                        startDate: startDate,
                        endDate: endDate,
                        pageNo: pageNo,
                        pageSize: pageSize
                    },
                    type: 'post',

③处理响应，解析json

data就是返回来的json。有市场活动列表和总条数
$("#totalRowsB").text(data.totalRows);//把查询的数据放在totalRowsB的标签里
遍历数组列表activityList 。$.each(遍历的数组，回调函数(index遍历的下标,obj循环变量))
定义字符串，存放市场活动列表数据 var htmlStr = "";
htmlStr += "<tr class=\"active\">"; 对表格的“”加上转义字符\

htmlStr += "<td><input type=\"checkbox\" value=\"" + obj.id + "\"/></td>";表单值获取，采用"+obj.xxx+"

<tbody id="tBody">通过这个代码进行插入$("#tBody").html(htmlStr);

text()显示文本信息不能有标签，html()可以有标签

 dataType: 'json',
                    //2.3处理响应 data有两个数据，一个是数组，一个是int
                    success: function (data) {
                        // 总条数
                        $("#totalRowsB").text(data.totalRows);//把查询的数据放在totalRowsB的标签里
                        // 遍历数组列表activityList $.each(遍历的数组，回调函数(index遍历的下标,obj循环变量))
                        // 定义字符串，存放市场活动列表数据
                        var htmlStr = "";
                        $.each(data.activityList, function (index, obj) {
                            // obj和this都是取出的数组元素,htmlStr进行字符串拼接
                            htmlStr += "<tr class=\"active\">";
                            htmlStr += "<td><input type=\"checkbox\" value=\"" + obj.id + "\"/></td>";
                            htmlStr += " <td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">" + obj.name + "</a></td>";
                            htmlStr += "<td>" + obj.owner + "</td>";
                            htmlStr += " <td>" + obj.startDate + "</td>";
                            htmlStr += " <td>" + obj.endDate + "</td>";
                            htmlStr += "</tr>";
                        });
                        // 把拼接好的表格字符串 插入到 显示的<tbody>
                        // text()显示文本信息不能有标签，html()可以有标签
                        $("#tBody").html(htmlStr);
                    }

完整的js

            //2.查询。当市场活动主页面加载完成，查询所有数据的第一页和总条数
            queryActivityByConditionForPage();

            //3.按条件查询
            $("#queryActivityBtn").click(function () {
                //按照条件查询
                queryActivityByConditionForPage();
            });

            function queryActivityByConditionForPage(){
                //2.查询。当市场活动主页面加载完成，查询所有数据的第一页和总条数
                //2.1收集查询的参数
                var name = $("#query-name").val();
                var owner = $("#query-owner").val();
                var startDate = $("#query-startDate").val();
                var endDate = $("#query-endDate").val();
                var pageNo = 1;//页码
                var pageSize = 10;//显示的数量
                //2.2发送请求
                $.ajax({
                    url: 'workbench/activity/queryActivityByConditionForPage.do',
                    data: {
                        name: name,
                        owner: owner,
                        startDate: startDate,
                        endDate: endDate,
                        pageNo: pageNo,
                        pageSize: pageSize
                    },
                    type: 'post',
                    dataType: 'json',
                    //2.3处理响应 data有两个数据，一个是数组，一个是int
                    success: function (data) {
                        // 总条数
                        $("#totalRowsB").text(data.totalRows);//把查询的数据放在totalRowsB的标签里
                        // 遍历数组列表activityList $.each(遍历的数组，回调函数(index遍历的下标,obj循环变量))
                        // 定义字符串，存放市场活动列表数据
                        var htmlStr = "";
                        $.each(data.activityList, function (index, obj) {
                            // obj和this都是取出的数组元素,htmlStr进行字符串拼接
                            htmlStr += "<tr class=\"active\">";
                            htmlStr += "<td><input type=\"checkbox\" value=\"" + obj.id + "\"/></td>";
                            htmlStr += " <td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">" + obj.name + "</a></td>";
                            htmlStr += "<td>" + obj.owner + "</td>";
                            htmlStr += " <td>" + obj.startDate + "</td>";
                            htmlStr += " <td>" + obj.endDate + "</td>";
                            htmlStr += "</tr>";
                        });
                        // 把拼接好的表格字符串 插入到 显示的<tbody>
                        // text()显示文本信息不能有标签，html()可以有标签
                        $("#tBody").html(htmlStr);
                    }


                });
            }

好博客就要一起分享哦！分享海报

此处可发布评论

评论（0）展开评论

暂无评论，快来写一下吧

展开评论

您可能感兴趣的博客