js 分頁技術
//分頁
var setPage = function (container, count, pageindex) {
var container = container; //div
var count = count; //頁總數
var pageindex = pageindex; //當前頁數
var a = [];
//總頁數少於10 全部顯示,大於10 顯示前3 後3 中間3 其餘....
if (pageindex == 1) {
a[a.length] = "<a class=\"prev unclick\">上一頁</a>";
} else {
a[a.length] = "<a class=\"prev\">上一頁</a>";
}
function setPageList() {
if (pageindex == i) {
a[a.length] = "<a class=\"on\">" + i + "</a>";
} else {
a[a.length] = "<a >" + i + "</a>";
}
}
//總頁數小於10
if (count <= 10) {
for (var i = 1; i <= count; i++) {
setPageList();
}
}
//總頁數大於10頁
else {
if (pageindex <= 4) {
for (var i = 1; i <= 5; i++) {
setPageList();
}
a[a.length] = "...<a >" + count + "</a>";
} else if (pageindex >= count - 3) {
a[a.length] = "<a >1</a>...";
for (var i = count - 4; i <= count; i++) {
setPageList();
}
}
else { //當前頁在中間部分
a[a.length] = "<a>1</a>...";
for (var i = pageindex - 2; i <= pageindex + 2; i++) {
setPageList();
}
a[a.length] = "...<a>" + count + "</a>";
}
}
if (pageindex == count) {
a[a.length] = "<a class=\"next unclick\">下一頁</a>";
} else {
a[a.length] = "<a class=\"next\">下一頁</a>";
}
container.innerHTML = a.join("");
//事件點擊
var pageClick = function () {
var oAlink = container.getElementsByTagName("a");
var inx = pageindex; //初始的頁碼
oAlink[0].onclick = function () { //點擊上一頁
if (inx == 1) {
return false;
}
inx--;
setPage(container, count, inx);
DataList(pageSize, inx,did); //ajax 請求的列表
return false;
}
for (var i = 1; i < oAlink.length - 1; i++) { //點擊頁碼
oAlink[i].onclick = function () {
inx = parseInt(this.innerHTML);
setPage(container, count, inx);
DataList(pageSize, inx, did); //ajax 請求的列表
return false;
}
}
oAlink[oAlink.length - 1].onclick = function () { //點擊下一頁
if (inx == count) {
return false;
}
inx++;
setPage(container, count, inx);
DataList(pageSize, inx, did); //ajax 請求的列表
return false;
}
}()
}
var setPage = function (container, count, pageindex) {
var container = container; //div
var count = count; //頁總數
var pageindex = pageindex; //當前頁數
var a = [];
//總頁數少於10 全部顯示,大於10 顯示前3 後3 中間3 其餘....
if (pageindex == 1) {
a[a.length] = "<a class=\"prev unclick\">上一頁</a>";
} else {
a[a.length] = "<a class=\"prev\">上一頁</a>";
}
function setPageList() {
if (pageindex == i) {
a[a.length] = "<a class=\"on\">" + i + "</a>";
} else {
a[a.length] = "<a >" + i + "</a>";
}
}
//總頁數小於10
if (count <= 10) {
for (var i = 1; i <= count; i++) {
setPageList();
}
}
//總頁數大於10頁
else {
if (pageindex <= 4) {
for (var i = 1; i <= 5; i++) {
setPageList();
}
a[a.length] = "...<a >" + count + "</a>";
} else if (pageindex >= count - 3) {
a[a.length] = "<a >1</a>...";
for (var i = count - 4; i <= count; i++) {
setPageList();
}
}
else { //當前頁在中間部分
a[a.length] = "<a>1</a>...";
for (var i = pageindex - 2; i <= pageindex + 2; i++) {
setPageList();
}
a[a.length] = "...<a>" + count + "</a>";
}
}
if (pageindex == count) {
a[a.length] = "<a class=\"next unclick\">下一頁</a>";
} else {
a[a.length] = "<a class=\"next\">下一頁</a>";
}
container.innerHTML = a.join("");
//事件點擊
var pageClick = function () {
var oAlink = container.getElementsByTagName("a");
var inx = pageindex; //初始的頁碼
oAlink[0].onclick = function () { //點擊上一頁
if (inx == 1) {
return false;
}
inx--;
setPage(container, count, inx);
DataList(pageSize, inx,did); //ajax 請求的列表
return false;
}
for (var i = 1; i < oAlink.length - 1; i++) { //點擊頁碼
oAlink[i].onclick = function () {
inx = parseInt(this.innerHTML);
setPage(container, count, inx);
DataList(pageSize, inx, did); //ajax 請求的列表
return false;
}
}
oAlink[oAlink.length - 1].onclick = function () { //點擊下一頁
if (inx == count) {
return false;
}
inx++;
setPage(container, count, inx);
DataList(pageSize, inx, did); //ajax 請求的列表
return false;
}
}()
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.