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语句了
结束...