ssm框架异步分页

点击查看同步分页
在mybatis-config.xml 中配置分页

<plugins>
		<plugin interceptor="com.github.pagehelper.PageInterceptor">
			<!-- 方言:用来指定数据库类型 -->
			<property name="helperDialect" value="mysql"/>
			<!--当页数值小于第一页时直接显示第一页   当页数值大于最后一页时只显示最后一页-->
			<property name="reasonable" value="true"/>
		</plugin>
	</plugins>

//返回json数据的通用返回类

public class ResultEntity {
    private Map<String,Object> map=new HashMap();
    //设置成功之后的状态 存入map
    public static ResultEntity success(){
        ResultEntity resultEntity=new ResultEntity();
        resultEntity.getMap().put("startCode",200);
        resultEntity.getMap().put("resule","成功!");
        return  resultEntity;
    }
    //设置连缀 存储页面要传入后台的信息
    public ResultEntity setPut(String key,Object value){
        this.getMap().put(key,value);
        return  this;
    }
    public Map<String, Object> getMap() {
        return map;
    }
    
    public void setMap(Map<String, Object> map) {
        this.map = map;
    }
}

后台
service

    //分页
    @Override
    public PageInfo<Baoxiao> getPageSearch(Map<String, Object> paramMap, String pageNum) {
        PageHelper.startPage(Integer.valueOf(pageNum), PageUtils.PAGE_SIZE);
        List<Baoxiao> baoxiaos = baoxiaoMapper.getPageSearch(paramMap);
        PageInfo<Baoxiao> pageInfo=new PageInfo(baoxiaos,PageUtils.PAGE_CONTROL);
        return pageInfo;
    }

controller

 //分页
    @RequestMapping(value = "/page",method = RequestMethod.GET)
    @ResponseBody
    //返回的是自己写的存放json数据的类
    public ResultEntity getPageSearch(HttpServletRequest request,@RequestParam(value = "pageNum",defaultValue = "1") String pageNum){
        //获取请求行信息
        String requestURI = request.getRequestURI();
        //获取前缀为search_的参数
        Map<String, Object> paramMap = WebUtils.getParametersStartingWith(request, "search_");
        //存前缀
        String prefix="search_";
        //调取service
        PageInfo<Baoxiao> pageInfo=baoXiaoService.getPageSearch(paramMap,pageNum);
        //调取工具类,用于分页传参数使用
        String queryStr = PageUtils.parseParamMapToQueryStr(paramMap, prefix);
        //返回的是自己写的存放json数据的类
        return ResultEntity.success().setPut("pageInfo",pageInfo).setPut("requestURI",requestURI).setPut("queryStr",queryStr);
    }

前台
ajax

//抽取的工具类
		function pageData(msg){
			$(msg.map.pageInfo.list).each(function (index,item) {
				var status = "";
				if(item.bxstatus == 0){
					status="未审批";
				}else if(item.bxstatus == 1){
					status="驳回";
				}else if(item.bxstatus ==2){
					status="已审批";
				}else{
					status="已付款";
				}
				var tr ="<tr align='center' name='append-tr' bgcolor='#FFFFFF' onMouseMove='javascript:this.bgColor='#FCFDEE';' onMouseOut='javascript:this.bgColor='#FFFFFF';' height='22' >"
						+"<td><input name='id' type='checkbox' id='id' value='"+item.bxid+"' class='np'></td>"
						+"<td>"+(index+1)+"</td>"
						+"<td>"+item.totalmoney+"</td>"
						+"<td align='center'><a href=''><u>"+moment(item.bxtime).format('YYYY-MM-DD')+"</u></a></td>"
						+"<td>"+item.bxremark+"</td>"
						+"<td>"+status+"</td>"
						+"<td><a href='mybaoxiao-edit.jsp?bxid="+item.bxid+"'>编辑</a> </td> </tr>";
				$("#focus-tr").before(tr);
			})
			//2.添加分页信息
			var firstPage="<a οnclick='cki(this.name)' name='"+msg.map.requestURI+"?pageNum=1"+msg.map.queryStr+"'>首页</a>";
			var prePage = "<a οnclick='cki(this.name)' name='"+msg.map.requestURI+"?pageNum="+(msg.map.pageInfo.pageNum-1)+msg.map.queryStr+"'>上一页</a>";
			$("#page-div").append(firstPage).append(prePage);
			$(msg.map.pageInfo.navigatepageNums).each(function(index,num){
				if(num == msg.map.pageInfo.pageNum){
					var a = "【"+num+"】";
				}else{
					var a = "<a οnclick='cki(this.name)' name='"+msg.map.requestURI+"?pageNum="+num+msg.map.queryStr+"'>"+num+"</a> &nbsp;";
				}
				$("#page-div").append(a);
			});
			var nextPage = "<a οnclick='cki(this.name)' name='"+msg.map.requestURI+"?pageNum="+(msg.map.pageInfo.pageNum+1)+msg.map.queryStr+"'>下一页</a> &nbsp;";
			var endPage ="<a οnclick='cki(this.name)' name='"+msg.map.requestURI+"?pageNum="+msg.map.pageInfo.pages+msg.map.queryStr+"'>末页</a> &nbsp;";
			$("#page-div").append(nextPage).append(endPage);
		}
		//就绪函数
		$(function () {
		var cid=$("#cid").val();
			$.ajax({
				type:"GET",
				url:"${pageContext.request.contextPath}/baoxiao/page",
				success:function (msg) {
					pageData(msg);
				}
			});
		});
			//条件查询  传入参数
			function submmit() {
				$("tr[name=append-tr]").remove();
				$("#page-div").html("");
				var cid=$("#cid").val();
				$.ajax({
					type:"GET",
					url:"${pageContext.request.contextPath}/baoxiao/page",
					data:{"search_cid":cid},
					success: function (msg) {
						pageData(msg);
					}
				})
			}

			//点击事件跳转分页,
			function cki(aa) {
				$("tr[name=append-tr]").remove();
				$("#page-div").html("");
				$.ajax({
					type:"GET",
					url:aa,
					success:function (msg) {
						pageData(msg);
					}
				})
				return false;
			}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值