myPagination 分页插件(ajax) + springmvc + springdata
乐健
前台
<link href="${ctx}/static/myPagination/css/page.css" rel="stylesheet" type="text/css" />
<script src="${ctx}/static/myPagination/js/jquery.myPagination.js" type="text/javascript"></script>
<script>
$(function() {
$("#pagediv").myPagination({
currPage: 1,
pageCount: 10,
pageSize: 7,
ajax: {
on: true, //开启状态
callback: 'ajaxCallBack', //回调函数，注，此 ajaxCallBack 函数，必须定义在 $(function() {}); 外面
url: '${ctx}' + "/admin/bobing/rolls/list", //访问服务器地址
dataType: 'json', //返回类型
param:{on:true,page:1,pageSize:10,acode:'',uname:''} //参数列表，其中 on 必须开启，page 参数必须存在，其他的都是自定义参数，如果是多条件查询，可以序列化表单，然后增加 page 参数
}
});
});
function search(){
$("#pagediv").myPagination({
currPage: 1,
pageCount: 10,
pageSize: 7,
ajax: {
on: true,
callback: 'ajaxCallBack',
url: '${ctx}' + "/admin/bobing/rolls/list",
dataType: 'json',
param:{on:true,page:1,pageSize:10,acode:document.getElementsByName('area')[0].value,uname:document.getElementsByName('uname')[0].value}
}
});
}
//自定义 回调函数
function ajaxCallBack(data) {
var result = data.result ;
var insetViewData = ""; //视图数据
$.each(result, function(index,items) {
//alert(items.id);
insetViewData += createTR(items);
});
$("table > tbody").html(insetViewData);
}
function createTR(obj){
var tr = "<tr>";
tr += "<td>"+obj.rollTimes.user.name+"</td>";
tr += "<td>"+obj.rollTimes.area.aname+"</td>";
tr += "<td>"+obj.rollCode+"</td>";
tr += "<td>"+obj.rollText+"</td>";
tr += "<td>"+obj.rollTime+"</td>";
tr += "<td>"+obj.score+"</td>";
tr += "</tr>";
return tr;
}
</script>
<body>
<table width="100%" border="1">
<thead>
<tr><td width="10%"><input type="text" name="uname"/></td><td width="10%"><input type="text" name="area" value="xm"/></td><td width="20%"><input type="button" value="查询" οnclick="search()"/></td><td width="20%"></td><td width="20%"></td><td width="20%"></td></tr>
<tr><td>用户</td><td>区域</td><td>结果</td><td>结果描述</td><td>时间</td><td>得分</td></tr>
</thead>
<tbody>
</tbody>
</table>
<div id="pagediv"></div>
</body>
后台
控制器：
@RequestMapping(value = { "/rolls/index", "/rolls" }, method = RequestMethod.GET)
public String rollsIndex() {
return "admin/rollsList";
}
@RequestMapping(value = "/rolls/list")
@ResponseBody
public String rollsList(@RequestParam("page") int page,
@RequestParam("pageSize") int pageSize,
@RequestParam("acode") String acode,
@RequestParam("uname") String uname) {
// Page<Rolls> p = rollsManager.getAllRolls(page, pageSize);
Page<Rolls> p = rollsManager.getRolls(page, pageSize,acode,uname);
Map<String, Object> map = Maps.newLinkedHashMap();
map.put("result", p.getContent());
map.put("pageCount", p.getTotalPages());
return jsonMapper.toJson(map);
}
service:
/**
* 根据区域代码、用户名 查看博饼记录
*
* @param pageIndex
* @param pageSize
* @param acode
* @param userName
* @return
*/
public org.springframework.data.domain.Page<Rolls> getRolls(int pageIndex,
int pageSize, String acode, String userName) {
PageRequest pageRequest = new PageRequest(pageIndex - 1, pageSize,
new Sort(Direction.DESC, "rollTime"));
if (StringUtils.isEmpty(acode) && StringUtils.isEmpty(userName))
return getRolls(pageRequest);
if (StringUtils.isNotEmpty(acode) && StringUtils.isNotEmpty(userName))
return getRollsByAreaAcodeUserName(acode,userName,pageRequest);
if (StringUtils.isNotEmpty(acode))
return getRollsByAcode(acode, pageRequest);
return getRollsByUserName(userName, pageRequest);
}
dao:
public interface RollsDao extends PagingAndSortingRepository<Rolls,Long>,RollsDaoCustom {
@Query("select r from Rolls r where r.area.acode = ?1 ")
public Page<Rolls> findByAreaAcode(String acode,Pageable pageable);
@Query("select r from Rolls r where r.user.name = ?1 ")
public Page<Rolls> findByUserName(String name,Pageable pageable);
@Query("select r from Rolls r where r.area.acode = ?1 and r.user.name = ?2 ")
public Page<Rolls> findByAreaAcodeAndUserName(String acode,String name,Pageable pageable);
@Query("select r from Rolls r where r.rollTimes.id = ?1 ")
public Page<Rolls> findByUserRollTimesId(Long id,Pageable pageable);
}
官网：http://code.google.com/p/mypagination/
中文参数乱码解决：修改jquery.myPagination.js中
$.ajax({url:varUrl,type:'POST',data:param,contentType:"application/x-www-form-urlencoded;charset=UTF-8" ....
type:'POST' contentType:"...charset=UTF-8"
类似资料：