1. 程式人生 > >ssm框架實現條件、分頁查詢【親測】

ssm框架實現條件、分頁查詢【親測】

0.用到了jquery、AJAX(前端)、ssm框架

1. input輸入框和查詢按鈕

<input id="queryText" type="text" placeholder="請輸入查詢條件">
 
<button id="queryBtn" type="button""> 查詢</button>

<tbody id="userData" >
</tbody>        
<tfoot>
	<tr >
		<td colspan="6" align="center">
			<ul class="pagination">
			</ul>
		</td>
	</tr>
</tfoot>

2.跳轉到頁面後先查詢一次,點選查詢按鈕判斷input框裡有沒有值,有的話按條件查詢,沒有就預設全部查詢(select * from table)

 /*先定義一個變數為了儲存input框中有沒有值,沒有為false,有為true*/
 var likeflag=false;

 $(function () {
			    pageQuery(1); 
			    $("#queryBtn").click(function(){
			    	var queryText=$("#queryText").val();
			    	if(queryText==""){
			    		likeflag=false;
			    	}else{
			    		likeflag=true;
			    	}
			    	pageQuery(1);
			    });
});

3.下來是查詢方法

 //分頁查詢
            function pageQuery(pageno) {
         		var loadingIndex=null;

         		var jsonData={"pageno":pageno,"pagesize":3};
         		if(likeflag==true){
         			jsonData.queryText=$("#queryText").val();
         		}
				$.ajax({
					type:"POST",
					url :"提交的路徑",
					data:jsonData,
					beforeSend:function(){
		 				loadingIndex=layer.msg('玩命查詢中...',{icon: 16});

					},
					success:function(result){
		 				layer.close(loadingIndex);
		 				if(result.success){
		 					//重新整理頁面資料
		 					
		 					var tableContent="";
		 					var pageContent="";
		 					
		 					
		 					var userPage=result.data;
		 					var users=userPage.datas;
		 					
		 					$.each(users,function(i,user){
		 						tableContent+='<tr>';
		 		                tableContent+='  <td>'+(i+1)+'</td>';
		 						tableContent+='  <td><input type="checkbox" name="userid" value="'+user.id+'"></td>';
		 		                tableContent+='  <td>'+user.loginacct+'</td>';
		 		                tableContent+='  <td>'+user.username+'</td>';
		 		                tableContent+='  <td>'+user.email+'</td>';
		 		                tableContent+='  <td>';
		 						tableContent+='      <button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>';
		 						tableContent+='      <button type="button" onclick="goUpdatePage('+user.id+')" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>';
		 						tableContent+='	  <button type="button" onclick="deleteUser('+user.id+',\''+user.loginacct+'\')" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>';
		 						tableContent+='  </td>';
		 		                tableContent+='</tr>';
		 					});
		 					if(pageno>1){
		 						 pageContent+='<li><a href="#" onclick="pageQuery('+(pageno-1)+')">上一頁</a></li>';
		 					}
		 					for(var i=1;i<=userPage.totalno;i++){
		 						if(i==pageno){
			 						 pageContent+='<li class="active"><a href="#">'+i+'</a></li>';

		 						}else{
			 						 pageContent+='<li ><a href="#" onclick="pageQuery('+i+')">'+i+'</a></li>';

		 						}
		 					}
		 					if(pageno<userPage.totalno){
		 						 pageContent+='<li><a href="#" onclick="pageQuery('+(pageno+1)+')">下一頁</a></li>';
		 					}

		 					$("#userData").html(tableContent);
		 					$(".pagination").html(pageContent);
		 				}else{
		 		    		layer.msg("使用者資訊分頁查詢失敗",{time:2000, icon:5,shift:6},function(){})

		 				}
	
					}
				})
			}

4.controller層程式碼


//queryText 查詢條件
//pageno 當前頁
//pagesize 每頁的記錄條數
public Object pageQuery(String queryText,Integer pageno,Integer pagesize) {
		AJAXResult result=new AJAXResult();
		try {
		//分頁查詢
			Map<String,Object> map=new HashMap<String,Object>();
			map.put("start", (pageno-1)*pagesize);
			map.put("size", pagesize);
			map.put("queryText", queryText);

			//查詢使用者的資訊
            List<User> users=userService.pageQueryData(map);
			
		
			//總記錄條數//查詢使用者資訊的條數
			int totalsize=userService.pageQueryCount(map);
			//最大頁碼
			int totalno=0;
			if(totalsize % pagesize==0) {
				totalno=totalsize/pagesize;
			}else {
				totalno=totalsize/pagesize+1;
			}
			//分頁物件
			Page<User> userPage=new Page<User>();
			userPage.setDatas(users);
			userPage.setPageno(pageno);
			userPage.setTotalno(totalno);
			userPage.setTotalsize(totalsize);
			//userPage傳到頁面
			result.setData(userPage);
			result.setSuccess(true);
		}catch(Exception e){
			e.printStackTrace();
			result.setSuccess(false);
		}
		
		return result;
	}

5.bean:AJAXResult和User和Page

public class AJAXResult {

	private boolean success;
	private Object data;
	

	public Object getData() {
		return data;
	}

	public void setData(Object data) {
		this.data = data;
	}

	public boolean isSuccess() {
		return success;
	}

	public void setSuccess(boolean success) {
		this.success = success;
	}
}
public class User {

	private Integer id;
	private String username;
	private String loginacct;
	private String userpswd;
	private String email;
	private String createtime;
	
	
	public String getCreatetime() {
		return createtime;
	}
	public void setCreatetime(String createtime) {
		this.createtime = createtime;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getUserpswd() {
		return userpswd;
	}
	public void setUserpswd(String userpswd) {
		this.userpswd = userpswd;
	}
	public String getLoginacct() {
		return loginacct;
	}
	public void setLoginacct(String loginacct) {
		this.loginacct = loginacct;
	}
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	
}
public class Page<T> {
	private List<T> datas;
	private int pageno;
	private int totalno;
	private int totalsize;
	
	public List<T> getDatas() {
		return datas;
	}
	public void setDatas(List<T> datas) {
		this.datas = datas;
	}
	public int getPageno() {
		return pageno;
	}
	public void setPageno(int pageno) {
		this.pageno = pageno;
	}
	public int getTotalno() {
		return totalno;
	}
	public void setTotalno(int totalno) {
		this.totalno = totalno;
	}
	public int getTotalsize() {
		return totalsize;
	}
	public void setTotalsize(int totalsize) {
		this.totalsize = totalsize;
	}
	

}

好了,到這就剩餘Service層和dao層以及dao.xmlsql語句了

結束...