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 += "<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>
具体的演示代码:
.title_list ul.bluepoint li
{
background-image: url(http://images.cnblogs.com/cnblogs_com/zengxiangzhan/WindowsLiveWriter/d064abd774a5_C5D9/dot_title_list_blue_thumb.gif);
line-height: 20px;
padding-left: 13px;
background-repeat: no-repeat;
list-style-type: none;
background-position: left center; }
.title_list ul.bluepoint li a{ text-decoration:none}
.title_list ul.title_list li span
{ padding-left: 10px;
font-family: arial;
font-size: 12px;
color: #666;
}
.turn_page_box
{ padding-bottom: 30px;
border-right-width: 0px;
zoom: 1;
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
padding-top: 0px;
font-weight: bold;
}
.turn_page_box .tpb_right a
{ border-right-width: 0px;
background: none transparent scroll repeat 0% 0%;
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
text-decoration:none
}
.turn_page_box .tpb_right a:hover {
color:#2557bd;
text-decoration: underline
}
.turn_page_box .tpb_right a.cur {
background: none transparent scroll repeat 0% 0%;
color: #2557bd
}
.turn_page_box .tpb_right a.cur:hover { background: none transparent scroll repeat 0% 0% }
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 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
- "
for (var j = 1; j " + item[start].title + "" + item[start].store_time + "
";
start++;
}
}
strText += "
"
}
document.getElementById("title1").innerHTML = strText;
//如果总页数不足5条
if (NumPages 0) {
beginpage = 1;
endpage = 10;
}
//如果显示最后面的5页
if (currpage (NumPages - 9)) {
beginpage = NumPages - 9;
endpage = NumPages;
}
//其他情况
if (currpage > 5 && currpage = (endpage + 1)) {
beginpage += 10;
endpage += 10;
}
if (currpage 0) {
showtext += "";
showtext += "上一页 ";
var currpages = currpage = 2) {
showtext += "1 ";
if (currpage1 > 2) {
showtext += "...";
}
}
for (i = currpage1; i " + i + " ";
} else {
showtext += "" + i + " ";
}
}
if (NumPages > 10 && currpages " + 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)
<< 上一页 1 2 3 4 5 下一页>>
//默认显示首页的内容
displaypage(1);
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
Java web velocity分页宏示例
复制代码 代码如下: #macro(pager $url $pager)<ul class="pagination"> #set($FRONT_LEN = 4) #set($BEHIND_LEN = 5) #set($PAGER_LEN = 10) #set($PAGER_CENTER = $!{pager.pageNum} - $!{BEHIND_LEN}) <li #if($!{pager.currentPage} == 1) class="disabl
-
java调用oracle分页存储过程示例
1.分页类 复制代码 代码如下: package org.zh.basic; /** * 页面类 * * @author keven * */public class PageInfo { // 定义 private String p_tableName; // -表名 private String p_strWhere; // --查询条件 private String p_orderColumn; // --排序的列 private String p_orderS
-
JavaMe开发自适应滚动显示
[问题描述] 我们常看到一些滚动显示的实例,比如UC浏览器中,显示网页的内容.当内容比较多时,采用滚动分页显示是合理的.在Canvas中绘图中,多余的内容被截断了.如何实现滚动分页显示呢? [原理] JavaMe中有一个坐标变换的功能.当触发相应的按键事件时,我们就让其显示相应的页,并且使滚动条滚动到相应的位置. [代码清单] ShowHelp.java package com.token.view; import javax.microedition.lcdui.Font; import ja
-
javascript 支持页码格式的分页类
但是他们插件的附属功能很多又不需要,而且没必要就为了这么一个功能区引用这个库,为速度考虑吧,当然你服务器好也行,但是其实这个效果不是必须的,但是觉的会常用,所以就包装成类了,供以后使用,也供有需要的人学习使用. 下面只是一个简单的demo,用的话自己可以在编辑页码样式,有默认的格式.不废话了,自己看吧,有注释使用说明...类(3kb)使用可以参照demo,不明白使用的可以留言. 以后会慢慢写一些项目开发中常遇到的问题,以及解决方案,和大家学习分享. jpage.js 复制代码 代码如下: /*
-
纯javascript实现分页(两种方法)
先给大家贴效果图: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用limit进行分页. 因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页去处理的,我就是用 这块代码写了两个稍微不同一些的分页!公共的代码抽取的也差不多,主要就是ajax后台以及返回的值不同而已,只要把总页码的值
-
javascript实现简单的分页特效
下面是一段javascript实现的分页代码,当然必须要结合后台代码实现.大家可以自行分析一下代码,希望能够给大家带来一定的帮助,代码如下: <script type="text/javascript"> function setPage(opt) { if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum) { return false }
-
Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码
首先是Jquery 无标题文档 $(function(){ var scrtime; $("#con").hover(function(){ clearInterval(scrtime); },function(){ scrtime = setInterval(function(){ var $ul = $("#con ul"); var liHeight = $ul.find("li:last").height(); $ul.animate({
-
JavaMe开发绘制文本框TextEdit
[问题描述] TextEdit是采用GameCanvas绘制的文本编辑器.本文结合实例给出实现的方法. [原理] 1 运用Graphics.GameCanvas绘制文本框和光标. 2 检测到输入事件时,跳转到 高级界面->TextBox .通过系统调用输入法完成输入. 3 将TextBox输入的值返回给TextEdit对象. [设计模式] 这个过程有点类似装饰模式,实际上,实现输入的还是TextBox,只是给TextBox装饰了一下,形成了一个漂亮的外观. [代码清单] TextEdit.jav
-
Java(基于Struts2) 分页实现代码
分页实现的基本过程是这样的: 1. 设置自己的分页器的基本参数(可以从配置文件中读取) ■每页显示的记录条数 ■每次最多显示多少页 2. 编写设置分页器其他参数的函数 主要参数有以下几个: 总记录条数 总页数 当前页号:现在显示的页数 每页显示的记录条数 当前页开始行(第一行是0行) 第一页页号 最后页页号 下一页页号 上一页页号 画面上显示的起始页号 画面上显示的结束页号 参数基本实现原理:设置以上各个参数,实际上只需要三个参数就可以对所有的其他变量进行设置,即总记录条数,每页显示记录数,每次
-
javascript+xml技术实现分页浏览
共有两个文件tmh.htm & tt.xml 源代码如下: tmh.htm 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="
-
javascript分页代码(当前页码居中)
复制代码 代码如下: function setPage(opt){ if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum){return false}; var allPageNum = opt.allPageNum; //总的页数 var showPageNum = opt.showPageNum; //显示的页数 var curpageNum = opt.curpag
-
Javascript实现的分页函数
/** * 分页类构造 * 参数 nTotalList: 总条数 * 参数 nPageSize: 每页显示条数 * 参数 nPageNum: 当前页码 * 参数 sPageUrl: 分页链接的URL,页码以[pn]代替,输出时将被替换为实际页码 * 参数 nPageListSize: 页码列表(下拉框)中显示的最多页码条数.该参数可省略,默认100 */ function Pagination(nTotalList, nPageSize, nPageNum, sPageUrl, n
-
JavaMe开发绘制可自动换行文本
[问题描述] JavaMe Graphics类中的drawString不支持文本换行,这样绘制比较长的字符串时,文本被绘制在同一行,超过屏幕部分的字符串被截断了.如何使绘制的文本能自动换行呢? [分析] drawString无法实现自动换行,但可以实现文本绘制的定位.因此可考虑,将文本拆分为多个子串,再对子串进行绘制.拆分的策略如下: 1 遇到换行符,进行拆分: 2 当字符串长度大于设定的长度(一般为屏幕的宽度),进行拆分. [步骤] 1 定义一个String和String []对象: priv