前言：
分页功能是我们在开发过程中最常见的一个功能了，作为一个以往只会搬砖不会造砖的年轻程序员，今天我要自己来实现这个功能，于是我查了不少的方法，今天我用jquery的插件实现了分页，记录一下~
源码：http:///jquery-info5697
场景：
我的应用场景是通过查询条件获取到数据库里的数据，将从后台返回的数据在前端分页显示。
html部分包括一个查询按钮，一个预留给数据的div，一个用来显示第几页的div~
步骤一：引入
首先我们要引入
<script src="/jquery/1.10.2/"></script>
<!--引入jquery分页插件pagination.js-->
<script src="./" type="text/javascript" ></script>
步骤二：创建一个div用以显示分页
创建一个div用以显示分页
<div class="Pagination"
style="height:20px;font-size:15px;margin-top: 15px;margin: auto;margin-left: 100px;"
id="pagination"></div>
（我觉得最好不要把样式写在html中，我这里求方便）
步骤三：通过ajax获取数据并显示
在这里我附上整个script
<script>
$(document).ready(function(){
});
$('#btn_query').on('click',function () {
/*查询某个班级所有的女生，先获取查询条件值*/
var class_name= $('#class_name').val();
var sex = $('#sex option:selected').val();
/*从后台获取数据并进行分页*/
$.ajax({
type : 'GET',
url: 'http://localhost:8080/query/studentsQuery',
contentType: "application/json",
data:{
"class_name":class_name,
"sex":sex
},
success : function(data) {
/*首先将要显示数据的部分清空*/
$('#data_table tbody').html('');
$('.Pagination').pagination({
totalData: data.total,//数据的总数量
showData: 10,//每页显示几条数据
coping: true,//首页和尾页
jump: true,//是否可以跳转
keepShowPN: true,
homePage: '首页',
endPage: '末页',
prevContent: '上页',
nextContent: '下页',
callback: function (api) {
/*当点击第X页时会触发callback函数,所以我把除第一页以外的数据渲染放到callback中，其中()是获取当前页码*/
console.log("this is current" + api.getCurrent());
$('.now').text(api.getCurrent());
if(api.getCurrent()!=1){
$('#data_table tbody').html('');
/*每页10条，第二页显示的是10-20的数据，此时next=20，当到最后一页时，next就等于数据总数total*/
var next = (api.getCurrent()-1)*10+10;
if((api.getCurrent()-1)*10+10>data.total){
next = data.total;
}
/*依次渲染数据*/
for(var i =(api.getCurrent()-1)*10;i<next;i++){
str=" <tr><th>"+(data.list[i].class_name!=null?data.list[i].class_name:'')+
"</th><th>"+(data.list[i].sex!=null?data.list[i].sex:'')+
"</th><th>"+(data.list[i].sNo!=null?data.list[i].sNo:'')+
"</th></tr>";
$('#data_table tbody').append(str);
}
}
}
}, function(api) {
//("this is pagination")
$('.now').text(api.getCurrent());
/*因为第一页要在点击查询按钮的时候就触发，所以我把它放在这里*/
if (api.getCurrent() == 1) {
for (var i = 0; i < 10; i++) {
var str = "";
str=" <tr><th>"+(data.list[i].class_name!=null?data.list[i].class_name:'')+
"</th><th>"+(data.list[i].sex!=null?data.list[i].sex:'')+
"</th><th>"+(data.list[i].sNo!=null?data.list[i].sNo:'')+
"</th></tr>";
$('#data_table tbody').append(str);
}
}
});
console.log("success");
var success=JSON.stringify(data);
console.log(success);
},
error:function (result) {
console.log("error");
}
});
})
$('#btn_cancel').on('click',function () {
console.log('cancel');
$('#class_name').val("");
$('#sex').val('');
$('#data_table tbody').html('');
})
</script>
我的数据是通过[i].xxx进行渲染的是因为我后台返回的数据的json格式如下：
{
"pageNum": 1,
"pageSize": 111,
"size": 111,
"startRow": 0,
"endRow": 110,
"total": 111,
"pages": 1,
"list": [
{
"class_name":"一年级",
"sex":"1",
"sNo":"001"
},
{
"class_name":"一年级",
"sex":"1",
"sNo":"002"
},........],
"navigateFirstPage": 1,
"navigateLastPage": 1,
"firstPage": 1,
"lastPage": 1
}
这是因为我在后台将我返回的数据进行了page封装，代码如下：（在这里我用实体接收参数传入，通过mybatis进行处理）
/**
* 学生查询
* @param student
* @return
*/
@RequestMapping(value = "/studentsQuery", method = RequestMethod.GET)
@ResponseBody
public PageInfo<Student> studentsQuery(Student student){
LOG.info("学生查询条件:{}",student);
PageInfo<Student> pageInfo = null;
try{
List<Student> students= queryService.studentsQuery(student);
LOG.info("学生查询结果为:...", students);
pageInfo = new PageInfo<Student>(students);
}catch(Exception e){
e.printStackTrace();
}
return pageInfo;
}
}
效果：
欢迎批评指正~