ssm框架實現條件、分頁查詢【親測】
阿新 • • 發佈:2019-01-05
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語句了
結束...