新闻标题 静态分页 (无刷新)
一个模板,从数据库取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 += "<div class=\"title_list\"><ul class=\"title_list bluepoint\">"
for ( var j = 1; j <= 5; j++) {
if (start < item.length) {
strText += "<li><a href=\"" + item[start].link_add + "\" target=\"_blank\">" + item[start].title + "</a><span>" + item[start].store_time + "</span></li>" ;
start++;
}
}
strText += "</ul></div>"
}
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 += "<span class=\"tpb_right\"><a href=\"javascript:displaypage(1)\" class=\"tpb_btn_previous\"><<</a> " ;
showtext += "<a href=\"javascript:displaypage(currpage-1)\">上一页</a> " ;
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 += "<a href=\"javascript:displaypage(1)\">1</a> " ;
if (currpage1 > 2) {
showtext += "..." ;
}
}
for (i = currpage1; i <= currpages; i++) {
if (currpage == (i)) {
showtext += "<a class=\"cur\" href=\"javascript:displaypage(" + i + ")\">" + i + "</a> " ;
} else {
showtext += "<a href=\"javascript:displaypage(" + i + ")\">" + i + "</a> " ;
}
}
if (NumPages > 10 && currpages <= NumPages - 1) {
if (currpages < NumPages - 1) {
showtext += "..." ;
}
showtext += "<a href=\"javascript:displaypage(" + NumPages + ")\">" + NumPages + "</a> " ;
}
showtext = showtext + "<a href=\"javascript:displaypage(currpage+1)\">下一页 </a>" ;
showtext = showtext + "<a href=\"javascript:displaypage(NumPages)\">>></a></span>" ;
}
document.getElementById( "page1" ).innerHTML = showtext;
}
|
调用:
<DIV id=title1> </DIV> <DIV id=page1 class =turn_page_box> </DIV>
<SCRIPT language=javascript>
//默认显示首页的内容
displaypage(1);
</SCRIPT>
|
演示
本文转自曾祥展博客园博客,原文链接:http://www.cnblogs.com/zengxiangzhan/archive/2010/03/17/1688097.html,如需转载请自行联系原作者