纯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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
JS实现一个简单的日历
Feb 22 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 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
星际流派综述
2020/03/04 星际争霸
第1次亲密接触PHP5(2)
2006/10/09 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
学习ExtJS table布局
2009/10/08 Javascript
javascript cookies操作集合
2010/04/12 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
python提取页面内url列表的方法
2015/05/25 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
python unittest实现api自动化测试
2018/04/04 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
国外软件测试工程师面试题
2016/12/09 面试题
田径运动会通讯稿
2014/09/13 职场文书
优秀教师申报材料
2014/12/16 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
高中生物教学反思
2016/02/20 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
JS实现扫雷项目总结
2021/05/19 Javascript
Python一行代码实现自动发邮件功能
2021/05/30 Python
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
python开发飞机大战游戏
2021/07/15 Python
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技