我们在页面展示一个table表格的时候，当数据量较大时，常常会考虑到数据分页的问题，数据分页一般有三种方式，分别是前端数据分页，后端数据分页，数据库分页。
前端数据分页：是把所有数据加载到前端，然后在前端用js实现数据的分页，这种分页方式是最方便简单的，但是也是效果最差的。因为当数据量很大时，前端加载数据耗时很久，页面会因为加载数据而无法正常显示，体验很差。并且因为数据是一次性加载到前端，当数据库有新数据更新时，如果不刷新页面重新读取数据库，就无法获取最新数据。
后端数据分页：是在后端将数据全部查出来，，将前端需要显示的部分数据筛选出来，传回前端。这种方式相对于前端数据分页来说效果要好很多。前端只用回传当前页要显示的少量数据，前端接收到的数据量也很少，传输负担就会小很多，可以减轻页面加载延迟。后端数据分页的缺点和前端刷新一样，如果想获取新数据，就要重新从数据库中加载所有数据到后端。
数据库分页：数据库分页是最好的分页方式，在后端拼接查询sql的时候，就把前端需要展示部分的数据条件拼接出来。每次都重新查询数据库，可以获取到最新数据，每次从数据库查询的数据量，只有前端当前要显示的那一部分，大大减少了数据的传输，缺点是sql的拼接比较复杂。
作者对三种分页方式都进行了总结，分为三篇文章。本文为前端数据分页方法。
一、第一次刷新页面逻辑
首先第一次刷新页面时，固定显示第一页数据，当数据超过一页时，按照每页最大条数正常显示，当数据不足一页时，显示所有数据。其中everypage是用来控制每页最大显示条数的
/** ajax刷新数据 **/function Refresh() {//获取筛选条件var taskid = $("#taskId").val();//每页显示条数var everypage = @ViewData["PageShowNum"];$.ajax({type: "GET",url: "/Task/Refresh",data: { "taskid": taskid },dataType: "text",success: function (data) {if (data == "") {$("#alert").html("数据刷新异常");} else {var str = "";var newdata = JSON.parse(data);//数据量大于一页时分页if (newdata.dataInfo.length != 0 && newdata.dataInfo.length >= everypage) {for (var i = 0; i < everypage; i++) {str += "<tr><td>" + newdata.dataInfo[i].recordTime +"</td><td>" + newdata.dataInfo[i].userName +"</td><td>" + newdata.dataInfo[i].taskID +newdata.dataInfo[i].info + "</td></tr>";}}//数据量小于一页时，直接显示else if (newdata.dataInfo.length != 0 && newdata.dataInfo.length < everypage) {for (var i = 0; i < newdata.dataInfo.length; i++) {str += "<tr><td>" + newdata.dataInfo[i].recordTime +"</td><td>" + newdata.dataInfo[i].userName +"</td><td>" + newdata.dataInfo[i].taskID +newdata.dataInfo[i].info + "</td></tr>";}}$("#tableText").html(str);//总页数var pagenum = Math.ceil(newdata.dataInfo.length / everypage);ShowPageFloot("1", @ViewData["AllPageNum"]);}}});return true;}二、页面跳转功能
我们再做一个用于点击跳转页面的页脚样式
/** 显示页面跳转功能 **/function ShowPageFloot(getpageclick, pagenum) {var pagehtml = "当前第 " + getpageclick + " 页，共 <span id = \"lastpagenum\">" + pagenum + "</span> 页，" +"<input type=\"text\" id=\"pageclick\" style=\"width: 30px; margin - right: 5px;\" name=\"pageclick\"/>" +" <input type=\"submit\" id =\"jumppage\" onclick=\"Jump()\" value=\"跳转\" /> <input type=\"hidden\" id=\"hidpagenum\" value=\"" + pagenum +"\">";$("#page").html(pagehtml);}生成的样式如下：
三、前端数据分页逻辑
在跳转功能的input框中输入要跳转的页面数字，点击跳转，跳转到指定页面，页面跳转部分js代码如下，在执行完跳转之后，记得调用跳转页面的页脚样式，从新刷新页脚数据：
/** 触发页面跳转 **/function Jump() {//每页显示条数var everypage = @ViewData["PageShowNum"];//计算数据分页总页数，向上取整var pagenum = Math.ceil(newdata.dataInfo.length / everypage);//获取输入的，将要跳转页的页码var getpageclick = $("#pageclick").val();//如果输入页码大于最大页数，跳转最后一页if (getpageclick > pagenum)getpageclick = pagenum;//如果输入页数小于第一页，跳转第一页if (getpageclick < 1)getpageclick = 1;//判断当前显示页，第一条数据，的序列数var begindata = (getpageclick - 1) * everypage;//判断当前显示页，最后一条数据，的序列数if (begindata + everypage > newdata.dataInfo.length) {enddata = newdata.dataInfo.length;}else {enddata = begindata + everypage;}//将计算出的起始数据和截止数据显示出来var str = "";if (newdata.dataInfo.length != 0) {for (var i = begindata; i < enddata; i++) {str += "<tr><td>" + newdata.dataInfo[i].recordTime +"</td><td>" + newdata.dataInfo[i].userName +"</td><td>" + newdata.dataInfo[i].taskID + newdata.dataInfo[i].info + "</td></tr>";}}$("#tableText").html(str);//ShowPageFloot(getpageclick, pagenum);}
