技術標籤：前端Jqueryjqueryajax

前言：

分頁功能是我們在開發過程中最常見的一個功能了，作為一個以往只會搬磚不會造磚的年輕程式設計師，今天我要自己來實現這個功能，於是我查了不少的方法，今天我用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;
    }

}

效果：

歡迎批評指正~