SSM框架 用ajax实现模糊查询分页和列表

本文展示了如何在SSM(Spring、SpringMVC、MyBatis)框架下,结合Ajax实现页面的模糊查询和分页功能。通过JSP、控制器和SQL查询的配合,达到数据的动态加载和过滤效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

主要使用ajax实现模糊查询分页和列表 三者合一

  1. jsp代码
<div class="pages"> <ul class="tcdPageCode tcdPageCode1" id="pagesert"></ul></div>
<script type="text/javascript">
//基础搜索等
 	 var thispage = 1;
	 submits(1,1);
	 function submits(page,examine){	
	     if(!arguments[0]) page = 1;
	     if(!arguments[1]) examine = 0;
	     $("#searchbase").ajaxSubmit({										
	 	type:'POST',
		url:"url路径?page="+page,
		data: {'status':1},
	 	beforeSubmit: function(){                    
	 	    window.index = layer.load(1);					
	 	},
	 	success: function(data){ 		
	 		dataarr = data.split("@#");		
	 		addContent(dataarr[1]);
	 	    $("#pagesert").html(dataarr[0]);
	 	    layer.close(window.index);
	 	    window.thispage = page;
	 	},
	 	resetForm: false,
	 	clearForm: false										
	    }); 
	}
	//添加分页内容
		function addContent(content){
		 	$("#contetss").html("");
		 	data =  eval('(' + content + ')');
			$.each(data, function(i, item) { 
				var compDatas = "<p><a class='wentihuifu' href='javascript:void(0);' onclick=\"helpss(\'"+item.id+"\')\">"+item.title+"<i>&gt;</i></a></p>";
		        $("#contetss").append(compDatas);
		    });
		}	
</script>
  1. 控制层代码
/**
 * 模糊查询带分页
 * @param help
 * @param response
 */
@RequestMapping("gamestitle")
public void gamestitle(Help help,HttpServletResponse response){
		List<Help> titles = gamesService.titles(help);
		String pages = "";
		if(titles.size()>0){
			pages=ManyPages.getPageStyleOne(titles.get(0).getTotal(), help.getPage(), help.getDistance());
		}
		OutPrint.echo(response, pages+"@#"+JSON.toJSONString(titles).toString());
}
  1. 两个实体
public class ManyPages {
	/**	 
	 * @param total:总数条数
	 * @param page:页码
	 * @param distance:每页显示数量
	 * @return
	 */
    public static String getPageStyleOne(int total,int page,int distance){
    	
    	int total_page = total%distance == 0 ? total/distance : (int)(total/distance)+1;
        int ppage = page-1<=0?1:page-1;
        int npage = page+1>total_page?1:page+1;
        String PageData = "<li class='pr_ne pali'><a href='javascript:submits("+ppage+",0)'>上一页</a></li>";  
        for(int i=1;i<=total_page;i++){ 
            if(i!=page&&i!=page+1&&i!=page-1&&i!=page+2) continue;
            String  onpage = i==page?"active":"";
            PageData += "<li class='pali panum page_hover "+onpage+"'><a href='javascript:submits("+i+",0)'>"+i+"</a></li>";
        }         
        PageData +=  "<li class='pr_ne pali'><a href='javascript:submits("+npage+",0)'>下一页</a></li>"+
                       "<li class='pali panone' style='background:none;border:none'><span style='display:inline-block;padding:5px 8px;background:none'>共"+total_page+"页</span><span style='display:inline-block;padding:5px 8px;background:none'>到第</span>"+
                       "<input type='text' class='panum' style='width:40px;padding:5px 7px' id='gotpage' />"+
                       "</li>"+
                       "<li class='pali'><a href=\"javascript:submits($('#gotpage').val(),0)\">确定</a></li>";                        
        return  PageData;     	    	
    }
}
public class PageBase{
	
    private int page ;
  
    private int distance;
  
    private int total;
    
    private int isPage;
    
    private int begen ;
    
    public PageBase(){ 
    	this.isPage = 1;
    	this.page = 1;
    	this.distance = 7;
    	this.begen = (this.page-1)*this.distance;
    }

	public int getPage() {		
		return page;
	}
	
	public void setPage(int page) {
		this.begen = (page-1)*this.distance;
		
		this.page = page;
	}
	
	public int getDistance() {
		return distance;
	}
	
	public void setDistance(int distance) {
		this.begen = (page-1)*distance;
		this.distance = distance;
	}
	
	public int getIsPage() {
		return isPage;
	}

	public void setIsPage(int isPage) {
		this.isPage = isPage;
	}

	public int getTotal() {
		return total;
	}

	public void setTotal(int total) {
		this.total = total;
	}

	public int getBegen() {
		return begen;
	}

	public void setBegen(int begen) {
		this.begen = begen;
	}
}
  1. sql
<select id="titles" resultType="util">
  		select
  		id,title,date,photos,content
  		<if test="isPage != 0">
	  		,(select count(*) from gam_help where 1=1
	  		  <if test="title != null and title != ''">and title like concat(concat('%',#{title}),'%')</if>
	  		  ) as total  		 
  		</if>
  		from gam_help where 1=1 <if test="title != null and title != ''">and title like concat(concat('%',#{title}),'%')</if> 
  			order by date desc
  		<if test="isPage != 0">
		     limit #{begen},#{distance}
	    </if> 
  	</select>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值