纯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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
微信小程序实现左右列表联动
May 19 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
vue实现简单图片上传
Jun 30 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
倒记时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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
php中的动态调用实例分析
2015/01/07 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
javascript求日期差的方法
2016/03/02 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
Python实现的购物车功能示例
2018/02/11 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
香港交友网站:be2香港
2018/07/22 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
演讲稿怎么写才完美
2014/01/02 职场文书
大学生职业生涯规划范文
2014/01/08 职场文书
说明书怎么写
2014/05/06 职场文书
工程部经理岗位职责
2015/02/02 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
浅析Django接口版本控制
2021/06/26 Python