网页分页前端应该做什么

当页面上的数据过多时，需要分页展示。这个时候就需要分页。分页有页码导航，点击对应页码时，展示当前页面的内容。
分页可以是前台分页也可以是后台分页。主要的区别是是由谁来分段处理数据。
一般分页的话，还需要加一个搜索功能。

前台分页

由后台将数据一次性传过来，再由前端进行数据处理，当数据较少时，可以由前端分页但是数据过多时，理所应当的就交由后台来完成分页功能。
打开页面时发送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 // 假如有十条数据
	}
})

当点击哪页的时候，就会发送获取哪页数据的接口。

因为所有数据都存放在后台，前端就丧失了搜索的能力，因此搜索的时候，就会再调用一个搜索接口。这个接口会有搜索的内容，这个一般也会涉及到分页，因为搜索到的内容可能过多，对比发现这个接口和获取所有数据的接口就差一个搜索关键字，因为可以将这两个接口合并成一个接口来处理。