纯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 相关文章推荐
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
Vue 按键修饰符处理事件的方法
May 04 Javascript
seajs下require书写约定实例分析
May 16 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 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
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
高效率JavaScript编写技巧整理
2013/08/23 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
利用Python如何生成hash值示例详解
2017/12/20 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
Django logging配置及使用详解
2019/07/23 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
python 修改本地网络配置的方法
2019/08/14 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
Python中有几个关键字
2020/06/04 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
如何开启linux的ssh服务
2015/02/14 面试题
英语专业毕业生自荐信范文
2013/12/31 职场文书
农村党员一句话承诺
2014/05/30 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
暑期家教宣传单
2015/07/14 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
CPU不支持Windows11系统怎么办
2021/11/21 数码科技