在做BS的项目时, 需要在界面显示部分表格信息,当显示大量信息时,为了使界面更美化,很需要进行分页。
分页的方式有两种:一种真分页;一种假分页。今天我们主要探讨一下假分页。
假分页又根据控件而不同。若用ASP.NET控件GridView显示数据则分页很简单:将开关打开,并且设置每页显示记录数。在GridView1_PageIndexChanging事件中编写代码:
GridView1.PageIndex = e.NewPageIndex。假分页每次分页显示的时候,总要进行将后台数据全部查询一遍,当数据量很大的时候,再进行分页,这样比较占用资源,或者换页缓慢。 但当数据量不大的时候可以使用简单的假分页。
做项目时,考虑到了兼容性,资源消耗性等问题,决定用html控件table来显示数据。下面介绍用table实现假分页:
<!--分页-->
<script>
//获取各个控件的值
var theTable = document.getElementById("mainTable");
//总页数
var totalPage = document.getElementById("spanTotalPage");
//页码
var pageNum = document.getElementById("spanPageNum");
//上一页
var spanPre = document.getElementById("spanPre");
//下一页
var spanNext = document.getElementById("spanNext");
//第一页
var spanFirst = document.getElementById("spanFirst");
//最后一页
var spanLast = document.getElementById("spanLast");
//获取表格的行数
var numberRowsInTable = theTable.rows.length;
//页面显示记录条数
var pageSize = 10;
//
var page = 1;
//下一页
function next() {
//隐藏表格
hideTable();
//当前行数=页面大小*页码
currentRow = pageSize * page;
//最大行数=当前行数+页面大小
maxRow = currentRow + pageSize;
//如果最大行数比表格行数大,最大行数为表格行数
if (maxRow > numberRowsInTable) maxRow = numberRowsInTable;
//
for (var i = currentRow; i < maxRow; i++) {
theTable.rows[i].style.display = '';
}
//页码加一,到下一页
page++;
//最后一页
if (maxRow == numberRowsInTable) { nextText(); lastText(); }
showPage();
preLink();
firstLink();
}
//上一页
function pre() {
hideTable();
page--;
currentRow = pageSize * page;
maxRow = currentRow - pageSize;
if (currentRow > numberRowsInTable) currentRow = numberRowsInTable;
for (var i = maxRow; i < currentRow; i++) {
theTable.rows[i].style.display = '';
}
if (maxRow == 0) { preText(); firstText(); }
showPage();
nextLink();
lastLink();
}
//第一页
function first() {
hideTable();
page = 1;
for (var i = 0; i < pageSize; i++) {
theTable.rows[i].style.display = '';
}
showPage();
preText();
nextLink();
lastLink();
}
//最后一页
function last() {
hideTable();
page = pageCount();
currentRow = pageSize * (page - 1);
for (var i = currentRow; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = '';
}
showPage();
preLink();
nextText();
firstLink();
}
//表头不能隐藏
//隐藏表格
function hideTable() {
for (var i = 1; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = 'none';
}
}
//显示页
function showPage() {
pageNum.innerHTML = page;
}
//总共页数
function pageCount() {
var count = 0;
if (numberRowsInTable % pageSize != 0) count = 1;
return parseInt(numberRowsInTable / pageSize) + count;
}
//显示链接
function preLink() { spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>"; }
function preText() { spanPre.innerHTML = "上一页"; }
function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>"; }
function nextText() { spanNext.innerHTML = "下一页"; }
function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>"; }
function firstText() { spanFirst.innerHTML = "第一页"; }
function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>"; }
function lastText() { spanLast.innerHTML = "最后一页"; }
//隐藏表格
function hide() {
for (var i = pageSize; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = 'none';
}
totalPage.innerHTML = pageCount();
pageNum.innerHTML = '1';
nextLink();
lastLink();
}
hide();
</script>
简单的分页效果实现了,如图:
通过界面代码,我们可以看出假分页其实是一次性的将所有数据查询出来,通过代码控制显示指定的部分数据行。当数据量比较少的时候这种方式很简洁方便。
实际情况中,我们应该根据实际情况和用户需求来选定使用的方法。