纯js写的分页表格数据为json串


Posted in Javascript onFebruary 18, 2014

什么也不说了,直接上代码:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<%@ taglib prefix="s" uri="/struts-tags" %> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<base href="<%=basePath%>"> 
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="This is my page"> 
<title>分页</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script type="text/javascript"> 
var tableData = [{"C0":"临夏州_康乐县","C1":190893.39,"C2":24544.65,"AREA_ID":"930013005"},{"C0":"临夏州_永靖县","C1":368900.35,"C2":40592.19,"AREA_ID":"930013006"},{"C0":"兰州市_东岗分局","C1":88.48,"C2":126.4,"AREA_ID":"930013106"},{"C0":"临夏州_临夏县","C1":107337.9,"C2":20612.1,"AREA_ID":"930013008"},{"C0":"临夏州_广河县","C1":69738.07,"C2":34894.44,"AREA_ID":"930013003"},{"C0":"临夏州_和政县","C1":46622.96,"C2":20954.97,"AREA_ID":"930013002"},{"C0":"临夏州_东乡县","C1":96021.84,"C2":16725.63,"AREA_ID":"930013004"},{"C0":"临夏州_临夏市中心","C1":1845311.12,"C2":129478.93,"AREA_ID":"930013001"},{"C0":"天水市_秦州区","C1":0,"C2":0,"AREA_ID":"930013801"},{"C0":"临夏州_积石山","C1":256181.79,"C2":15185.98,"AREA_ID":"930013007"},{"C0":"酒泉_肃州区","C1":264312,"C2":402.6,"AREA_ID":"930013701"}]; 
var columns = [{"cid":"C0","ctext":"区县"},{"cid":"C1","ctext":"客户总收入"},{"cid":"C2","ctext":"当月出账费用"}]; 
/** 
page:页码 
pageSize:每页的记录条数 
此方法除了传入page和pageSize之外,还应知道的有三个参数: 
一、表的全部数据,json串格式,可通过action查询数据库得到。 
二、表头所对应的列的key及名称,也是json串格式 
三、表所对应的id 
注:此处只是适合表头只有一行,且事先写好的情况。您可以根据需要改一下,逻辑思路就是这样,欢迎批评指正。 
*/ 
function splitPage(page,pageSize){ 
var ptable = document.getElementById("page_table"); 
var num = ptable.rows.length;//table.rows返回表格中包含的所有行,此处假设表由表头1行和表体N行组成 
//alert(num); 
//清除tbody 
for(var i=num-1;i>0;i--){ 
ptable.deleteRow(i); 
} 
var totalNums = tableData.length;//总行数 
var totalPage = Math.ceil(totalNums/pageSize);//总页数 
var begin = (page-1)*pageSize;//页起始位置(包括) 
var end = page*pageSize;//页结束位置(不包括) 
end = end>totalNums?totalNums:end; 
//向tbody中写入数据 
var n = 1;//tbody的起始行 
for(var i=begin;i<end;i++){ 
var row = ptable.insertRow(n++); 
var rowData = tableData[i]; 
for(var j=0;j<columns.length;j++){ 
var col = columns[j].cid; 
var cell = row.insertCell(j); 
var cellData = rowData[col]; 
cell.innerHTML = cellData; 
} 
} 
//生成分页工具条 
var pageBar = "第"+page+"页/共"+totalPage+"页"+" "; 
if(page>1){ 
pageBar += "<a href=\"javascript:splitPage("+1+","+pageSize+");\">首页</a> "; 
}else{ 
pageBar += "首页 "; 
} 
if(page>1){ 
pageBar += "<a href=\"javascript:splitPage("+(page-1)+","+pageSize+");\">上一页</a> "; 
}else{ 
pageBar += "上一页 "; 
} 
if(page<totalPage){ 
pageBar += "<a href=\"javascript:splitPage("+(page+1)+","+pageSize+");\">下一页</a> "; 
}else{ 
pageBar += "下一页 "; 
} 
if(page<totalPage){ 
pageBar += "<a href=\"javascript:splitPage("+(totalPage)+","+pageSize+");\">尾页</a> "; 
}else{ 
pageBar += "尾页 "; 
} 
document.getElementById("page_bar").innerHTML = pageBar; 
} 
</script> 
</head> <body onload="splitPage(1,3);"> 
<table id="page_table"> 
<thead> 
<tr> 
<th>h1</th> 
<th>h2</th> 
<th>h3</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>111</td> 
<td>222</td> 
<td>333</td> 
</tr> 
</tbody> 
</table> 
<div id="page_bar"></div> 
</body> 
</html>
Javascript 相关文章推荐
Prototype String对象 学习
Jul 19 Javascript
JavaScript 获取事件对象的注意点
Jul 29 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
javascript断点调试心得分享
Apr 23 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
倒记时60刷新网页的js代码
Feb 18 #Javascript
JS替换文本域内的回车示例
Feb 18 #Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 #Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 #Javascript
如何将网页表格内容导入excel
Feb 18 #Javascript
js charAt的使用示例
Feb 18 #Javascript
jQuery 回车事件enter使用示例
Feb 18 #Javascript
You might like
php at(@)符号的用法简介
2009/07/11 PHP
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
pytorch中的inference使用实例
2020/02/20 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
回门宴新郎答谢词
2014/01/12 职场文书
村官学习十八大感想
2014/01/15 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
委托收款证明
2015/06/23 职场文书