纯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 相关文章推荐
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
validator验证控件使用代码
Nov 23 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
setTimeout学习小结
Feb 08 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 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
10条PHP高级技巧[修正版]
2011/08/02 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python多线程实例教程
2014/09/06 Python
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
python tkinter组件摆放方式详解
2019/09/16 Python
python3 mmh3安装及使用方法
2019/10/09 Python
python循环输出三角形图案的例子
2019/11/22 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
Python与C/C++的相互调用案例
2021/03/04 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
计算机通信专业推荐信
2014/02/22 职场文书
合作投资意向书
2014/04/01 职场文书
北大自主招生自荐信
2015/03/04 职场文书
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL