jQuery分页插件(jquery.page.js)的使用

效果描述：
不用分页即可显示的jQuery插件
jQuery分页插件——jQuery.page.js用法很简单，效果很棒

1.前端

首先html的head中引入相关css与js

<link rel="stylesheet" href="/css/page.css" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.page.js"></script>

html的body中

<div id="pager"></div>

html的head中添加

<script type="text/javascript">
$(function(){
//自动加载
loadMyEssay();

function loadMyEssay() {
var pageSize = 5;

$(document).ready(function() {
//设置默认第1页
init(1);
});

//默认加载
function init(pageNo){
$("#result").html("");
$.ajax({
url:"/frame/myEssay"+'/'+pageNo+'/'+pageSize,
type:"get",
contentType:"application/json;charset=utf-8",
dataType:"json",
success:function(data){
//i表示在data中的索引位置，n表示包含的信息的对象
$.each(data.datas,function(i,n){
//获取对象中属性为value的值
var essayId = n.id;
var essayTitle = n.title;
var createTime = new Date(n.createTime).pattern("yyyy-MM-dd hh:mm:ss");
var admire = n.admireCount;
var evaluate = n.evaluateCount;

var blog =
'<tr>'+
'<td>'+
'<img alt="头像" src="/img/logo.jpg">'+
'</td>'+
'<td>'+
'<a href="/views/blogDetail.html?essayId='+essayId+'">   '+essayTitle+'</a>'+
'<br>'+
'<br>'+
'<span>'+createTime+'<span>'+
'</td>'+
'</tr>'+
'<tr>'+
'<td>'+
'<a href="#">赞(<span style="color: red; cursor: pointer">'+admire+'</span>)</a>'+
'<a href="#">评论(<span style="color: red; cursor: pointer">'+evaluate+'</span>)</a>'+
'</td>'+
'</tr>';

$('#result').append(blog);
});

$("#pager").pager({
pagenumber: pageNo,
pagecount:data.pageCount,
totalcount:data.total,
buttonClickCallback: PageClick
});
},
error:function(){
alert("error");
}
});
}

//回调函数
PageClick = function(pageclickednumber) {
init(pageclickednumber);
}
}
});
</script>

2.后台

controller

@RequestMapping(value="/myEssay/{pageNo}/{pageSize}", method=RequestMethod.GET, produces=JsonUtil.JSON)
public PageDto findMyEssay(@PathVariable int pageNo, @PathVariable int pageSize) {
String userId = userService.currentUserId();
return essayService.findMyEssay(userId, pageNo, pageSize);
}

service（Jpa的分页方法）

public PageDto findMyEssay(String userId, int pageNo, int pageSize) {
pageNo--;
PageDto pageDto = new PageDto();

//排序Sort
//Sort sort = new Sort(Sort.Direction.DESC, "createdate").and(new Sort(Sort.Direction.AES, "id"));
//Pageable pageable = new PageRequest(1, 10, sort);
Sort sort = new Sort(Sort.Direction.DESC, "createTime");
Pageable pageable = new PageRequest(pageNo, pageSize, sort);
Page<Essay> essays = essayDao.findByUser(userDao.findOne(userId), pageable);
List<EssayDto> essayDtos = new ArrayList<EssayDto>();
for (Essay essay : essays) {
EssayDto essayDto = new EssayDto();
essayDto.setId(essay.getId());
essayDto.setTitle(essay.getTitle());
essayDto.setCreateTime(essay.getCreateTime());
int admireCount = admireDao.findByEssay(essay).size();
int evaluateCount = evaluateDao.findByEssay(essay).size();
essayDto.setAdmireCount(admireCount);
essayDto.setEvaluateCount(evaluateCount);
essayDtos.add(essayDto);
}
pageDto.setTotal((int)essays.getTotalElements());
pageDto.setDatas(essayDtos);
pageDto.setPageCount(essays.getTotalPages());
return pageDto;
}

原生sql的分页方法 参考的 service

public PageDto findAllEssay(String type,int pageNo,int pageSize) throws ParseException {
pageNo--;

PageDto pageDto = new PageDto();
if (type.equals("today")) {
String sql = "FROM essay WHERE create_time LIKE '" + new SimpleDateFormat("yyyy-MM-dd").format(new Date()) + " %' ORDER BY create_time DESC";
return findEssayPage(pageNo, pageSize, pageDto, sql, type);
} else if (type.equals("5_essay")) {
String sql = "FROM essay ORDER BY create_time DESC LIMIT 0,5";
return findEssayPage(0, 5, pageDto, sql, type);
} else {
String sql = "FROM essay ORDER BY create_time DESC";
return findEssayPage(pageNo, pageSize, pageDto, sql, type);
}
}

private PageDto findEssayPage(int pageNo, int pageSize, PageDto pageDto, String sql, String type) {
Query query = entityManager.createNativeQuery("SELECT * " + sql, Essay.class);
BigInteger  count_number = null;
if (!type.equals("5_essay")) {
//总记录数
Query query_number = entityManager.createNativeQuery("SELECT COUNT(*) " + sql);
count_number = (BigInteger) query_number.getSingleResult();
pageDto.setTotal(count_number.intValue());

//分页
if (pageNo >= 0) {
query.setFirstResult(pageNo * pageSize);
}
if (pageSize > 0) {
query.setMaxResults(pageSize);
}
} else {
count_number = BigInteger.valueOf(5);
}

@SuppressWarnings("unchecked")
List<Essay> essays = query.getResultList();
List<EssayDto> essayDtos = new ArrayList<EssayDto>();
for (Essay essay : essays) {
EssayDto essayDto = modelMapper.map(essay, EssayDto.class);
int admireCount = admireDao.findByEssay(essay).size();
int evaluateCount = evaluateDao.findByEssay(essay).size();
essayDto.setAdmireCount(admireCount);
essayDto.setEvaluateCount(evaluateCount);
User user = essay.getUser();
essayDto.setUserId(user.getId());
essayDto.setUserName(user.getUserName());
essayDtos.add(essayDto);
}
pageDto.setDatas(essayDtos);
pageDto.setPageCount((count_number.intValue() + pageSize -1) / pageSize);
return pageDto;
}