纯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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
js 效率组装字符串 StringBuffer
Dec 23 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 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高级编程-函数-郑阿奇
2011/07/04 PHP
php常见的魔术方法详解
2014/12/25 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
详解vue axios二次封装
2018/07/22 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
Python写的贪吃蛇游戏例子
2014/06/16 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
Python给图像添加噪声具体操作
2019/03/03 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
python实现图片中文字分割效果
2019/07/22 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
励志演讲稿3分钟
2014/08/21 职场文书
地雷战观后感
2015/06/09 职场文书
公司老总年会致辞
2015/07/30 职场文书
JavaScript执行机制详细介绍
2021/12/06 Javascript