前端Jquery使用pagination.js插件进行分页

前言：

分页功能是我们在开发过程中最常见的一个功能了，作为一个以往只会搬砖不会造砖的年轻程序员，今天我要自己来实现这个功能，于是我查了不少的方法，今天我用jquery的pagination.js插件实现了分页，记录一下~
pagination.js源码：http://www.jq22.com/jquery-info5697

场景：

我的应用场景是通过查询条件获取到数据库里的数据，将从后台返回的数据在前端分页显示。
html部分包括一个查询按钮，一个预留给数据的div，一个用来显示第几页的div~

步骤一：引入pagination.js

首先我们要引入pagination.js

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!--引入jquery分页插件pagination.js-->
<script src="./jquery.pagination.js" 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中，其中api.getCurrent()是获取当前页码*/
				    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) {
					//console.log("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>

我的数据是通过data.list[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;
    }

}

效果：

欢迎批评指正~