纯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 面向对象(三)接口代码
May 23 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 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 连接mssql数据库 初学php笔记
2010/03/01 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
ie 调试javascript的工具
2009/04/29 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
微信小程序使用Promise简化回调
2018/02/06 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
python中map、any、all函数用法分析
2015/04/21 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
Django更新models数据库结构步骤
2020/04/01 Python
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
自我鉴定书范文
2013/10/02 职场文书
电子信息工程自荐信
2014/05/26 职场文书
骨干教师个人总结
2015/02/11 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书