基于javascript和xml实现分页功能代码

 代码如下 复制代码

<html>
<head>
<title></title>
<script language="javascript" type="text/javascript" charset='gbk' src="js.js"></script>
</head> <!-- http://www.111cn.net -->
<body onload="init()">
<div id="div_toc"></div>
<div id="div_img"></div>
<div id="div_page"></div>
<div id="div_meta"></div>
</body>
</html>

javascript文件

 

 代码如下 复制代码

//初始化页面
function init() {
var ary = JSONToArray(XMLReader("node","content.dibi"));
var divtoc = document.getElementById("div_toc");
pageCount = ary.length;
for(k = 0; k < ary.length; k++){
obj = eval('(' + ary[k] + ')');
divtoc.innerHTML += "<a href='javascript:changeImage(" + obj.page.substring(obj.page.length-1) + ")'>"
+ obj.label + "</a> ";
}

page = 1;
changeImage(page);

var pageManager = document.getElementById("div_page");
pageManager.innerHTML = "<a href='javascript:changePage(0)'>上一页</a> "
+ "<a href='javascript:changePage(1)'>下一页</a><br/><br/>";

var ary2 = JSONToArray(XMLReader("meta","content.dibi"));
var divmeta = document.getElementById("div_meta");
var styStr = "<table>"
for(l = 0; l < ary2.length; l++){
obj2 = eval('(' + ary2[l] + ')');
styStr += "<tr><td>" + obj2.name + "</td><td>" + obj2.content + "</td></tr>";
}
divmeta.innerHTML = styStr + "</table>";
}

//解析.dibi 文件。
function XMLReader(key,fileName) {
var parse = BrowserValidator();
parse.load(fileName);
var json = "";
try{
var dom = parse.documentElement;
var attrLength = 0;
for (i = 0; i < dom.getElementsByTagName(key).length; i++) {
attrLength = dom.getElementsByTagName(key)[i].attributes.length;
objMsg = ",{";
for(j = 0; j < attrLength; j++){
objMsg += "'" + dom.getElementsByTagName(key)[i].attributes[j].name
+ "':'" + dom.getElementsByTagName(key)[i].attributes[j].value + "',";
}
objMsg = objMsg.substring(0,objMsg.length-1);
json += objMsg + "}";
}
json = json.substring(1);
}catch(e){}
return json;
}

//判断浏览器类型。支持 IE ,fireFox。
function BrowserValidator(){
var result;
if(!window.DOMParser && window.ActiveXObject) {
result = new ActiveXObject("Microsoft.XMLDOM");
result.async = false;
}
else if(document.implementation && document.implementation.createDocument) {
result = document.implementation.createDocument("", "", null);
result.async = false;
}
return result;
}

var page = 1; //当前页
var pageCount; //总页数

//根据点击改变页面图片
function changeImage(page1){
page = page1;
var divimg = document.getElementById("div_img");
divimg.innerHTML = "<img width='500' src = 'images/" + page +".jpg'/>";
}

//上页及下页
function changePage(flag){
if(flag == 0 && page > 1){
page--;
}
if(flag == 1 && page < pageCount){
page++;
}
changeImage(page);
}

//将 JSON 数据转换成数组
function JSONToArray(json){
return json.replace(new RegExp("},", "g"), "}|").split("|");

时间: 2024-09-19 23:57:15

基于javascript和xml实现分页功能代码的相关文章

javascript实现json页面分页实例代码

 这篇文章主要介绍了javascript实现json页面分页实例代码,需要的朋友可以参考下 下午有个朋友问json 数据怎么分页 就捣鼓了一个东东出来    下面直接代码: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

基于BootStrap实现局部刷新分页实例代码_javascript技巧

在之前的工作中我用的分页有很多,一直不牢固,所以自己用起来也不是很顺手,这是一个局部刷新的分页,我试了很多,本想用mvcPager来做局部刷新,但是考虑到成本太高,放弃了,先来总结一下基于bootstrap的分页吧,便于自己以后使用 开源地址 https://github.com/lyonlai/bootstrap-paginator 首先引用 Jquery bootstrap.min.js bootstrap-paginator.min.js 控制器代码 [AuthorizationCodeA

AspNetPager如何实现无刷新分页功能代码???

问题描述 AspNetPager控件如何实现无刷新分页功能.本人已经用了以下的代码,还需要怎么改动???<%@RegisterAssembly="AspNetPager"Namespace="Wuqi.Webdiyer"TagPrefix="webdiyer"%><divid="news"><ulclass="li6"><asp:RepeaterID="r

基于Socket.IO实现Android聊天功能代码示例

一.简述 Socket.IO是一个完全由JavaScript实现.基于Node.js.支持WebSocket的协议用于实时通信.跨平台的开源框架,它包括了客户端的JavaScript和服务器端的Node.js. 该种官方介绍看起来有点懵逼,简而言之就是:客户端可通过Socket.IO与服务器建立实时通信管道 二.应用 该下就是介绍Socket.IO通信管道的铺设.通信以及销毁工作. 2.1 引入Socket.io包 compile 'io.socket:socket.io-client:0.8.

javabean servlet jsp实现分页功能代码解析_java

前端实现用ligerUI实现分页,感觉用框架确实简单,闲着无聊,模拟着liger的分页界面实现了一遍(只要是功能,样式什么无视)  这里用基础的三层架构+servlet+jsp实现,思路很简单,把所有分页相关信息写入到一个pagebean类里面,service返回这个bean类,每次分页查询时都从该bean里查找信息.只是其中的细节问题比较繁琐,如边界处理(前端和后台边界都要处理),下拉框跳转后要显示当前页等等  这是ligerUI实现的分页样式(实现过程我的上一篇博客有写:http://www

基于JFace Text Framework构建全功能代码编辑器: 第9部分

Template Template(模版)可以用来快速添加某种固定形式的代码,中间还可以插入参数.对于 Java 编辑器来说,你可以在 Eclipse 的设置中找到相应的属性页,路径是 General->Java->Editor->Templates.这个属性页是Eclipse标准的模版属性页,因为它做的比较完善,所以一般不需要自己写一个. 仔细探索一下这个属性页,尝试编辑一下模版,你可能会发现很多不了解的概念,下面我会一一解释 模版属性 模版包含一些基本属性: Name(名称):这个模

基于JFace Text Framework构建全功能代码编辑器: 第7部分

Quick Assistant Quick Assistant(快速帮助)的基本用途是为源代码中的错误提供一些快速的解决方案.快速的意思是指这个方案足够简单或者足够模式化,可以由程序帮你自动完成.当然快速帮助是无法解决深层次的问题的,不过一般我们在编写代码的时候,犯的最多的都是一些小错误,所以快速帮助是个非常有用的功能. 在 Java 编辑器中,快速帮助看上去就是下图的样子: 图1. Java 编辑器中的快速帮助 可见,不管是从名字上,还是界面上,快速帮助都非常类似我提过的 Content As

基于JFace Text Framework构建全功能代码编辑器: 第1部分

引言 JFace Text Framework(JFace 文本框架,后面直接简称为 JTF)是 Eclipse 中重要的框架,是其它开发工具的基石之一,比如 JDT (Java Development Tool) 中的 Java 源代码编辑器就是基于它开发的.相信用过 JDT 的人都会对它的源代码编辑器有深刻印象,因为它的很多功能可以让我们很方便的编辑 Java 源代码,比如语法高亮和内容提示等等.所有这些功能都是在 JTF 架的基础上实现的,所以学会使用这个框架对于开发某种语言的编辑工具是至

基于Jquery实现表格动态分页实现代码_jquery

当页面点击分页图标时,程序会自动去后台获取对应页数的记录. 关键代码如下: 需要引入的css和js文件有: 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="<%=basePath %>css/theme/default/css/jpage.css"></link> <link ID="skin" rel="sty