你好，现在大多数的分页功能都是这样实现的：
点击分页控件的第几页就去重新请求一边数据，这个获取数据的SQL或者其他获取方式要按照分页控件传过来的页下标去取数据，例如SQL的select top 10 * from 。。。,取前10条，点击第二页的话就取排序后的11~20条。下面是我工作中用到的一个JS实现的分页控件，其中getData()方法就是获取数据的方法：
// 加载分页控件
loadNav = function () {
var pn = $('PageCont');
pn.innerHTML = "";
// 当前页
var indexSpan = document.createElement("span");
// 首页
var homePage = document.createElement("a");
homePage.target = "_self";
homePage.setAttribute("href", "#");
homePage.innerHTML = "首页";
// 上一页
var pageUp = document.createElement("a");
pageUp.target = "_self";
pageUp.setAttribute("href", "#");
pageUp.innerHTML = "上一页";
// 下一页
var pageDown = document.createElement("a");
pageDown.target = "_self";
pageDown.setAttribute("href", "#");
pageDown.innerHTML = "下一页";
// 尾页
var endPage = document.createElement("a");
endPage.target = "_self";
endPage.setAttribute("href", "#");
endPage.innerHTML = "尾页";
if (pageIndex == 1) {// 第一页时
homePage.className = "nolink";
pageUp.className = "nolink";
indexSpan.innerHTML = "1";
pageDown.onclick = function () {
pageIndex = pageIndex + 1;
getData();
};
endPage.onclick = function () {
pageIndex = pageCount;
getData();
};
} else if (pageIndex == pageCount) {// 最后一页时
homePage.onclick = function () {
pageIndex = 1;
getData();
};
pageUp.onclick = function () {
pageIndex = pageIndex - 1;
getData();
};
indexSpan.innerHTML = pageCount;
pageDown.className = "nolink";
endPage.className = "nolink";
} else {
homePage.onclick = function () {
pageIndex = 1;
getData();
};
pageUp.onclick = function () {
pageIndex = pageIndex - 1;
getData();
};
pageDown.onclick = function () {
pageIndex = pageIndex + 1;
getData();
};
endPage.onclick = function () {
pageIndex = pageCount;
getData();
};
indexSpan.innerHTML = pageIndex;
}
// 十页以内
if (pageCount < 11) {
pn.appendChild(homePage);
pn.appendChild(pageUp);
for (var i = 1; i < pageCount + 1; i++) {
if (i == pageIndex) {
pn.appendChild(indexSpan);
continue;
}
var a = document.createElement("a");
a.target = "_self";
a.setAttribute("href", "#");
a.innerHTML = i;
a.onclick = function () {
pageIndex = parseInt(this.innerHTML);
getData();
};
pn.appendChild(a);
}
pn.appendChild(pageDown);
pn.appendChild(endPage);
} else {// 十页以上时
pn.appendChild(homePage);
pn.appendChild(pageUp);
if (pageIndex < 5) {
for (var i = 1; i < 7; i++) {
if (i == pageIndex) {
pn.appendChild(indexSpan);
continue;
}
var a = document.createElement("a");
a.target = "_self";
a.setAttribute("href", "#");
a.innerHTML = i;
a.onclick = function () {
pageIndex = parseInt(this.innerHTML);
getData();
};
pn.appendChild(a);
}
// 省略span
var dSpan = document.createElement("span");
dSpan.className = "txt";
dSpan.innerHTML = "...";
pn.appendChild(dSpan);
var lastPage = document.createElement("a");
lastPage.target = "_self";
lastPage.setAttribute("href", "#");
lastPage.innerHTML = pageCount;
lastPage.onclick = function () {
pageIndex = parseInt(pageCount);
getData();
};
pn.appendChild(lastPage);
} else if (pageIndex > 4 && pageIndex < pageCount - 3) {
var fisrtPage = document.createElement("a");
fisrtPage.target = "_self";
fisrtPage.setAttribute("href", "#");
fisrtPage.innerHTML = 1;
fisrtPage.onclick = function () {
pageIndex = parseInt(1);
getData();
};
pn.appendChild(fisrtPage);
// 省略span
var dSpan = document.createElement("span");
dSpan.className = "txt";
dSpan.innerHTML = "...";
pn.appendChild(dSpan);
for (var i = pageIndex - 2; i < pageIndex + 3; i++) {
if (i == pageIndex) {
pn.appendChild(indexSpan);
continue;
}
var a = document.createElement("a");
a.target = "_self";
a.setAttribute("href", "#");
a.innerHTML = i;
a.onclick = function () {
pageIndex = parseInt(this.innerHTML);
getData();
};
pn.appendChild(a);
}
// 省略span
var dSpan = document.createElement("span");
dSpan.className = "txt";
dSpan.innerHTML = "...";
pn.appendChild(dSpan);
var lastPage = document.createElement("a");
lastPage.target = "_self";
lastPage.setAttribute("href", "#");
lastPage.innerHTML = pageCount;
lastPage.onclick = function () {
pageIndex = parseInt(pageCount);
getData();
};
pn.appendChild(lastPage);
} else {
var fisrtPage = document.createElement("a");
fisrtPage.target = "_self";
fisrtPage.setAttribute("href", "#");
fisrtPage.innerHTML = 1;
fisrtPage.onclick = function () {
pageIndex = parseInt(1);
getData();
};
pn.appendChild(fisrtPage);
// 省略span
var dSpan = document.createElement("span");
dSpan.className = "txt";
dSpan.innerHTML = "...";
pn.appendChild(dSpan);
for (var i = pageCount - 5; i < pageCount + 1; i++) {
if (i == pageIndex) {
pn.appendChild(indexSpan);
continue;
}
var a = document.createElement("a");
a.target = "_self";
a.setAttribute("href", "#");
a.innerHTML = i;
a.onclick = function () {
pageIndex = parseInt(this.innerHTML);
getData();
};
pn.appendChild(a);
}
}
pn.appendChild(pageDown);
pn.appendChild(endPage);
}
pn.parentNode.style.display = "block";
fun();
};
内容全部来源于网络收集，如有侵权，请联系网站删除：QQ：24596024