您的位置:首页 > Web前端 > JavaScript

使用ajax、pageHelpler分页插件、利用json数据特性实现分页查询

2017-12-29 10:56 1046 查看
注:博主用到了Bootstrap 框架美化页面

页面代码

<table class="table table-hover">
<thead>
<tr>
<td>id</td>
<td>name</td>
<td>phone</td>
<td>emp_sex</td>
<td>emp_post</td>
<td>emp_status</td>
<td>emp_indate</td>
<td>emp_outdate</td>
<td>emp_other</td>
<td>操作</td>
</tr>
</thead>
<tbody id="ok">

</tbody>
</table>
<!--当前页 总页数 总记录数 -->
<p id="pagehelp"></p>

<!-- 分页按键 -->
<nav aria-label="Page navigation">
<ul id="jbgao" class="pagination">

</ul>
</nav>


在加载jsp页面时发送请求得到数据

<script type="text/javascript">
$(function() {
$.ajax({
type : "POST",
url : "sdf/test",
data : "",
success : function(result) {
//alert(result.returnData.keys[1].empId);
//成功调用。。。
showAll(result);
showing(result);
}
});
});
//博主是在首次插入时数据给每个td一个id然后用一个loadXMLDoc()函数通过每个id替换之前的数据,博主这里有点脱裤子放屁了
function showAll(result) {
//可以不加id不写loadXMLDoc()直接在这写一个empty()清空上一次的数据代码更可观
var test=0;
$.each(result.returnData.keys.list, function(index, item) {
var ok = $("<td></td>").attr("id","myid"+test+"").append(item.empId);
var empName = $("<td></td>").attr("id","myname"+test+"").append(item.empName);
var empPhone = $("<td></td>").attr("id","myPhone"+test+"").append(item.empPhone);
var empSex = $("<td></td>").attr("id","mySex"+test+"").append(item.empSex==1?"女":"男");
var empPost = $("<td></td>").attr("id","myPost"+test+"").append(item.empPost);
var empstatus = $("<td></td>").attr("id","myStatus"+test+"").append(item.empStatus);
var empIndate = $("<td></td>").attr("id","myIndate"+test+"").append(item.empIndate);
var empOutdate = $("<td></td>").attr("id","myOutdate"+test+"").append(item.empOutdate);
var show = $("<tr></tr>").append(ok).append(empName).append(empPhone).append(empSex).append(empPost)
.append(empstatus).append(em
4000
pIndate).append(empOutdate).appendTo("#ok");
test++;
});
}
function showing(result) {
var ing=result.returnData.keys.pageNum;
$("#pagehelp").text("当前第" +ing+ "页,总共" + result.returnData.keys.pageSize
+ "页,总记录数" + result.returnData.keys.total);
showzhuta(result);
}

function showzhuta(result){
$("#jbgao").empty();
//首页
var so=$("<li></li>").append($("<a></a>").append("首页")).appendTo("#jbgao");
so.click(function(){
loadXMLDoc(1);
});
//上一页
var next=$("<li></li>").append($("<a></a>").append("<<")).appendTo("#jbgao");
if(result.returnData.keys.hasPreviousPage==true){
next.click(function(){
loadXMLDoc(result.returnData.keys.pageNum - 1);
});
}
//显示当前状态
$.each(result.returnData.keys.navigatepageNums, function(index, item) {
var dao=$("<li></li>").append($("<a></a>").append(item)).appendTo("#jbgao");
dao.click(function(){
loadXMLDoc(item);
});
});
//下一页
var next=$("<li></li>").append($("<a></a>").attr("href","#").append(">>")).appendTo("#jbgao");
if(result.returnData.keys.hasNextPage==true){
next.click(function(){
loadXMLDoc(result.returnData.keys.pageNum + 1);
});
}
//尾页
var ho=result.returnData.keys.pages;
var ing=$("<li></li>").append($("<a></a>").append("尾页")).appendTo("#jbgao");
ing.click(function(){
loadXMLDoc(ho);
});
}

/*
* 定义替换的方法
*/
function loadXMLDoc(vi) {
$.ajax({
type : "POST",
url : "sdf/test?pn="+vi+"",
data : "",
success : function(result) {
var tests = 0;
$.each(result.returnData.keys.list, function(index,item){
$("#myid" + tests + "").html(item.empId);
$("#myname" + tests + "").html(item.empName);
$("#myPhone" + tests + "").html(item.empPhone);
$("#mySex" + tests + "").html(item.empSex == 1 ? "女" : "男");
$("#myPost" + tests + "").html(item.empPost);
$("#myStatus" + tests + "").html(item.empStatus);
$("#myIndate" + tests + "").html(item.empIndate);
$("#myOutdate" + tests + "").html(item.empOutdate);
tests++;
});
showing(result);

}
});
}
</script>


Controller类

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.budo.beancla.Employee;
import com.budo.beancla.Performance;
import com.budo.run.Test;
import com.budo.service.Serlet;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;

@Controller
@RequestMapping("/sdf")
public class Context {
Employee em = new Employee();

@Autowired
Serlet ser;
//要使用ResponseBody注解
@RequestMapping("/test")
@ResponseBody
public Test test(@RequestParam(value = "pn", defaultValue = "1") Integer ge) {
PageHelper.startPage(ge, 3);
System.out.println("yes");
//查询出数据
List<Employee> list = ser.sele();
PageInfo page=new PageInfo(list,3);
//将数据返回
return Test.success().add("keys", page);
}

}


Test类json数据封装

import java.util.HashMap;
import java.util.Map;

public class Test {
// 666即成功,444即失败
private int code;
// 提示信息
private String msg;
// 服务端要返回到客户端的数据
private Map<String, Object> ReturnData = new HashMap<String, Object>();

/**
* 自定义一个简单的成功方法
* @return
*/
public static Test success(){
Test msg = new Test();
msg.setCode(666);
msg.setMsg("执行成功!");
return msg;
}
/**
* 自定义一个简单的失败方法
* @return
*/
public static Test fail(){
Test msg = new Test();
msg.setCode(444);
msg.setMsg("执行失败!");
return msg;
}
/**
* 自定义一个添加返回数据的方法
* @return
*/
public Test add(String arg0,Object arg1){
this.getReturnData().put(arg0, arg1);
return this;
}
public Map<String, Object> getReturnData() {
return ReturnData;
}
public void setReturnData(Map<String, Object> returnData) {
ReturnData = returnData;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}

public String getMsg() {
return msg;
}

public void setMsg(String msg) {
this.msg = msg;
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  分页 ajax 插件 数据
相关文章推荐