網頁分頁前端應該做什么

當頁面上的數據過多時，需要分頁展示。這個時候就需要分頁。分頁有頁碼導航，點擊對應頁碼時，展示當前頁面的內容。
分頁可以是前台分頁也可以是后台分頁。主要的區別是是由誰來分段處理數據。
一般分頁的話，還需要加一個搜索功能。

前台分頁

由后台將數據一次性傳過來，再由前端進行數據處理，當數據較少時，可以由前端分頁但是數據過多時，理所應當的就交由后台來完成分頁功能。
打開頁面時發送ajax，通過接口來獲取所的數據，將數據緩存在一個變量上，比如allDatas[Array]。
寫一個方法來處理當前頁碼時的展示的數據。

/**
*handleData:處理展示的數據
* @param:
*  currentPage[Number]:當前頁碼
*  length[Number]:當前頁的展示條數
*  data[Array]:要分頁的數據
* @return:
*  arr[Array]:要展示的數據
/
function handleData(currentPage, length, data) {
	var arr = data.slice((currentPage - 1) * length, currentPage * length);
	return arr;
}

拿到當前頁的數據后，再將數據綁定到頁面即可。
點擊分頁切換時，只需將當前頁的頁碼和數據長度傳入方法即可以獲取當前頁的數據。
例如handleData(2, 10, allDatas)即可獲得第二頁十條數據。

搜索功能：
因為數據都在前台存放，所以搜索時，只要將allDatas里的數據過濾即可，

function filterData(key) {
	var filterArr = [];
	for (var i = 0; i < allDatas.length; i++) {
		var cur = allDatas[i];
		if (cur.indexOf(key)) {
			filterArr.push(cur);
		}
	}
}

因為過濾出來的數據也有可能是分頁的，也要進行分頁處理。即傳入到handleData中即可。

后台分頁

與前台分頁相比，后台分頁主要就是前端調用后台的接口來工作。
數據處理都會由后台來完成，前端的工作相對會輕松很多。
首屏展示會第一次調用獲取數據接口，一般傳的字段會有，頁數+當前頁有多少條數據。

$.ajax({
	url: 'xxx',
	type: 'GET',
	dataType: 'json',
	data: {
		startPage: 1,
		total: 10 // 假如有十條數據
	}
})

當點擊哪頁的時候，就會發送獲取哪頁數據的接口。

因為所有數據都存放在后台，前端就喪失了搜索的能力，因此搜索的時候，就會再調用一個搜索接口。這個接口會有搜索的內容，這個一般也會涉及到分頁，因為搜索到的內容可能過多，對比發現這個接口和獲取所有數據的接口就差一個搜索關鍵字，因為可以將這兩個接口合並成一個接口來處理。