分页查询翻页功能

h259077

已于 2022-11-16 22:48:19 修改

阅读量525

点赞数

文章标签：前端 javascript spring mybatis bootstrap

于 2022-11-15 17:36:11 首次发布

本文链接：https://blog.csdn.net/h259077/article/details/127855287

版权

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

前端页面（查询条件）

<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>市场活动列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="query-name">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="query-owner">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input class="form-control" type="text" id="query-startDate" />
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input class="form-control" type="text" id="query-endDate">
				    </div>
				  </div>
				  
				  <button type="button" class="btn btn-default" id="queryActivityBtn">查询</button>
				  
				</form>
			</div>

<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="chckAll"/></td>
							<td>名称</td>
							<td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody id="tBody"></tbody>
</div>

当市场活动主页面加载完成之后,显示所有数据的第一页; 市场主页面：workbench/activity/index.jsp

<li class="liClass"><a href="workbench/activity/index.do" target="workareaFrame"><span class="glyphicon glyphicon-play-circle"></span> 市场活动</a></li>

编写Controller  查询所用用户 保存到request作用域  页面跳转到workbench/activity/index

   @Autowired
    UserService userService;
       @Autowired
       ActivityService activityService;
    @RequestMapping("/workbench/activity/index.do")
        public String index(HttpServletRequest request){
         //调用service层方法 查询所有用户
         List<User> userList=userService.selectAllUsers();
         //把数据保存daorequest中
        request.setAttribute("userList",userList);
         //请求转发到 市场活动主页面
        return "/workbench/activity/index";
    }

workbench/activity/index.jsp页面

首先完成创建模块（点击创建按钮弹出创建市场模块窗口输入数据点击保存收集参数 ajax请求携带参数访问 url:'workbench/activity/saveCreateActivity.do' 然后Controller层拦截调用Service层

保存数据其中Activity属性中含有外键依赖User表（通过session获取） uuid设置id ，CreateTime ,CreateBy 是user的id属性）

编写service层接口和实现类 mapper层接口和mapper.xml 详情请见：创建市场活动_h259077的博客-CSDN博客

当市场活动主页面加载完成，查询所有数据的第一页以及所有数据的总条数,默认每页显示10条

$(function(){
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请求
		$.ajax({
			url: "workbench/activity/queryActivityByConditionForPage.do",
			data: {
				name: name,
				owner: owner,
				startDate: startDate,
				endDate: endDate,
				pageNo: pageNo,
				pageSize: pageSize
			},
			type: 'post',
			dataType: 'json',
			success: function (data) {
				//显示总条数totalRows     totalRows
				$("#totalRowsB").text(data.totalRows);

				//显示市场活动的列表
				//遍历activityList 拼接所有行数据
				var htmlStr = "";
				$.each(data.activityList, function (index, obj) {
					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='workbench/activity/detailActivity.do?id=" + obj.id + "'\">" + obj.name + "</a></td>";
					htmlStr += "<td>" + obj.owner + "</td>";
					htmlStr += "<td>" + obj.startDate + "</td>";
					htmlStr += "<td>" + obj.endDate + "</td>";
					htmlStr += "</tr>";
				});
				$("#tBody").html(htmlStr);
			}
		});
	});

页面一加载完毕查询条件为空 pageNO=1 pageSize=10 初始化页面

ajax请求携带参数 url: "workbench/activity/queryActivityByConditionForPage.do",

Controller层获取参数查询数据（刚开始查询条件为空页面初始化）

把参数封装成map service根据查询条件查询数据和总记录条数

把查询数据和记录条数封装到map集合以json格式返回给浏览器

success：执行回调函数拼接html 把数据封装进去显示在div中

 @RequestMapping("/workbench/activity/queryActivityByConditionForPage.do")
    @ResponseBody
    public 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.selectActivityByConditionForPage(map);
        System.out.println(activityList+"=============");
        int totalRows=activityService.selectCountOfActivityCondition(map);
        System.out.println("----------"+totalRows);
        //根据查询结果 生成响应信息
        Map<String,Object> retMap=new HashMap<>();
        retMap.put("activityList",activityList);
        retMap.put("totalRows",totalRows);

        return retMap;
    }

Service层 Activity数据库表

List<Activity> selectActivityByConditionForPage(Map<String,Object> map); 接口 +实现类

int selectCountOfActivityCondition(Map<String,Object> map);

Mapper层接口和mapper文件

<select id="selectActivityByConditionForPage" parameterType="map" 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>

查询的Activity中的owner所有者和User表进行内连接获取User的name

create_by创建者和User表进行内连接获取User的name

edit_by 和User表进行外连接外键可以为空

<select id="selectCountOfActivityCondition" parameterType="map" resultType="int">
    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>

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

查询满足条件的条数

把根据查询条件查询的代码封装成函数

queryActivityByConditionForPage(pageNo,pageSize)

当市场活动页面一加载就调用函数默认显示 pageNo=1 ，pageSize=10

根据查询条件点击查询时：

$("#queryActivityBtn").click(function () {
			queryActivityByConditionForPage(1,
			$("#demo_pag1").bs_pagination('getOption','rowsPerPage'));
		});

$("#demo_pag1").bs_pagination('getOption','rowsPerPage')); 根据上次的选择的

每页显示条数使用分页插件中的功能

翻页功能：

首先根据Controller层返回的retMap 获取到满足条件的记录条数和总条数（满足条件的）

根据总条数和 queryActivityByConditionForPage(pageNo,pageSize)的pageSize

计算出页数总条数/每页条数

var totalPages=1;
				if(data.totalRows%pageSize==0){
				totalPages=data.totalRows/pageSize;
				}else{
					totalPages=parseInt(data.totalRows/pageSize)+1;
				}

//对容器调用bs_pagination工具函数 自动翻页

$("#demo_pag1").bs_pagination({
					currentPage:pageNo, //当前页号 pageNo*/
					rowsPerPage:pageSize,  //每页显示条数 pageSize
					totalRows:data.totalRows,  //总条数
					totalPages: totalPages, //总页数
					visiblePageLinks:5 , //最多可以显示的卡片数

					showGoToPage:true,  //是否显示“跳转到”页面
					showRowsPerPage:true, //是否显示 每页显示条数*/
					showRowsInfo:true,  //是否显示记录信息

					//用户每次切换页号，自动触发本函数
					//每次返回切换页号之后的 paageNo和 pageSize
					onChangePage: function (event,pageObj){
						/*alert(pageObj.currentPage);
						alert(pageObj.rowsPerPage);*/
						queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
					}
				});

有乱码还没解决（忽略）

点击翻页实现列表页更新

onChangePage: function (event,pageObj){
						/*alert(pageObj.currentPage);
						alert(pageObj.rowsPerPage);*/
						queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
					}

列表标签一点击就更新调用 queryActivityByConditionForPage（pageNo,pageSize）

/* pageObj:就代表这个工具函数bs_pagination
*  pageObj.currentPage可以获取pageNo 第几页
* pageObj.rowsPerPage 可以获取 一页最多显示几条数据  */

h259077

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分页查询翻页功能

翻页查询
复制链接

扫一扫

分页查询 翻页功能

“相关推荐”对你有帮助么？

分页查询翻页功能