html无刷新分页代码,javascript 新闻标题静态分页代码 (无刷新)_javascript技巧

一个模板，从数据库取n条记录，生成静态。

做单页面的静态化,索引页面是用JS对数组进行组合的。

因为记录只是一个标题，一个链接，字节数不会太大，

那么用js去用这个大数组进行分页，貌似不错,很节约带宽!

还是很棒的，简单，实用，值得推荐！

JS代码：

function title_array(title, link_add, store_time) {

this.title = title;

this.link_add = link_add;

this.store_time = store_time;

}

var ii = 0;

var item = new Array();

ii++; item[ii] = new title_array('学无止境 25', '#', '(03月17日 23:47)');

ii++; item[ii] = new title_array('学无止境 24', '#', '(03月17日 23:42)');

ii++; item[ii] = new title_array('学无止境 23', '#', '(03月17日 23:32)');

ii++; item[ii] = new title_array('学无止境 22', '#', '(03月17日 23:29)');

ii++; item[ii] = new title_array('学无止境 21', '#', '(03月17日 23:19)');

ii++; item[ii] = new title_array('学无止境 20', '#', '(03月17日 23:15)');

ii++; item[ii] = new title_array('学无止境 19', '#', '(03月17日 23:13)');

ii++; item[ii] = new title_array('学无止境 18', '#', '(03月17日 23:12)');

ii++; item[ii] = new title_array('学无止境 17', '#', '(03月17日 23:10)');

ii++; item[ii] = new title_array('学无止境 16', '#', '(03月17日 22:35)');

ii++; item[ii] = new title_array('学无止境 15', '#', '(03月17日 22:29)');

ii++; item[ii] = new title_array('学无止境 14', '#', '(03月17日 22:28)');

ii++; item[ii] = new title_array('学无止境 13', '#', '(03月17日 22:27)');

ii++; item[ii] = new title_array('学无止境 12', '#', '(03月17日 22:26)');

ii++; item[ii] = new title_array('学无止境 11', '#', '(03月17日 22:24)');

ii++; item[ii] = new title_array('学无止境 10', '#', '(03月17日 22:23)');

ii++; item[ii] = new title_array('学无止境 9', '#', '(03月17日 22:02)');

ii++; item[ii] = new title_array('学无止境 8', '#', '(03月17日 22:02)');

ii++; item[ii] = new title_array('学无止境 7', '#', '(03月17日 22:01)');

ii++; item[ii] = new title_array('学无止境 6', '#', '(03月17日 21:51)');

ii++; item[ii] = new title_array('学无止境 5', '#', '(03月17日 21:51)');

ii++; item[ii] = new title_array('学无止境 4', '#', '(03月17日 21:50)');

ii++; item[ii] = new title_array('学无止境 3', '#', '(03月17日 21:31)');

ii++; item[ii] = new title_array('学无止境 2', '#', '(03月17日 21:30)');

ii++; item[ii] = new title_array('学无止境 1', '#', '(03月17日 21:30)');

//要显示的页面

var currpage = 1;

//一页显示信息条数为40

var pagesize = 5;

//页数维护所显示的第一页

var beginpage = 1;

//页数维护所显示的最后一页

var endpage = 100;

//显示某一页的内容

function displaypage(onepage) {

if (onepage < 1) {

alert("已到达首页");

return;

}

var NumRecords;

if (item.length == 1) {

NumRecords = item.length;

} else {

NumRecords = item.length - 1; //信息总条数，减一因为是从下标[1]开始存的信息。

}

//没有信息就返回

if (NumRecords <= 0) {

return false;

}

NumPages = Math.floor((NumRecords + (pagesize - 1)) / pagesize); //总页数

if (onepage > NumPages) {

alert("已经到达尾页");

return;

}

currpage = onepage;

//该页的第一行

var start = pagesize * (currpage - 1) + 1;

if (NumRecords == 1) {

start = start - 1;

}

if (start >= item.length) return;

//装入该页内容

var strText = "";

for (var i = 1; i <= pagesize / 5; i++) {

strText += "

"

for (var j = 1; j <= 5; j++) {

if (start < item.length) {

strText += "

" + item[start].title + "" + item[start].store_time + "";

start++;

}

}

strText += ""

}

document.getElementById("title1").innerHTML = strText;

//如果总页数不足5条

if (NumPages < 10) {

beginpage = 1;

endpage = NumPages;

} else {

//如果显示最前面的5页

if (currpage <= 5 && currpage > 0) {

beginpage = 1;

endpage = 10;

}

//如果显示最后面的5页

if (currpage <= NumPages && currpage > (NumPages - 9)) {

beginpage = NumPages - 9;

endpage = NumPages;

}

//其他情况

if (currpage > 5 && currpage < (NumPages - 9)) {

if (currpage >= (endpage + 1)) {

beginpage += 10;

endpage += 10;

}

if (currpage <= (beginpage - 1)) {

beginpage -= 10;

endpage -= 10;

}

}

}

var showtext = "";

if (NumPages > 0) {

showtext += "<< ";

showtext += "上一页 ";

var currpages = currpage < NumPages - 2 ? currpage + 2 : NumPages;

var currpage1 = currpage <= 2 ? 1 : currpage - 2;

if (NumPages <= 10) {

currpage1 = 1;

currpages = NumPages;

} else if (currpage1 >= 2) {

showtext += "1 ";

if (currpage1 > 2) {

showtext += "...";

}

}

for (i = currpage1; i <= currpages; i++) {

if (currpage == (i)) {

showtext += "" + i + " ";

} else {

showtext += "" + i + " ";

}

}

if (NumPages > 10 && currpages <= NumPages - 1) {

if (currpages < NumPages - 1) {

showtext += "...";

}

showtext += "" + NumPages + " ";

}

showtext = showtext + "下一页";

showtext = showtext + ">>";

}

document.getElementById("page1").innerHTML = showtext;

}

调用：

具体的演示代码:

演示

学无止境 25(03月17日 23:47)

学无止境 24(03月17日 23:42)

学无止境 23(03月17日 23:32)

学无止境 22(03月17日 23:29)

学无止境 21(03月17日 23:19)

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理