DreamWeaver_Zhou
DreamWeaver_Zhou

分页

  1. >  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta charset="UTF-8">  
  6.         <title>js解析json添加到表格并分页title>  
  7.     head>  
  8.     <script type="text/javascript">  
  9.         var tableData = [{  
  10.             "C0": "临夏州_康乐县",  
  11.             "C1":  190893.39,  
  12.             "C2":  24544.65,  
  13.             "AREA_ID": "930013005"  
  14.         }, {  
  15.             "C0" :   "临夏州_永靖县",  
  16.             "C1" :  368900.35,  
  17.             "C2" :  40592.19,  
  18.             "AREA_ID" : "930013006"  
  19.         }, {  
  20.             "C0" :   "兰州市_东岗分局",  
  21.             "C1" :  88.48,  
  22.             "C2" :  126.4,  
  23.             "AREA_ID" : "930013106"   
  24.         }, {  
  25.             "C0" :   "临夏州_临夏县",  
  26.             "C1" :  107337.9,  
  27.              "C2":  20612.1,  
  28.             "AREA_ID" : "930013008"  
  29.         }, {  
  30.             "C0" : "临夏州_广河县",  
  31.             "C1" :  69738.07,  
  32.             "C2" :  34894.44,  
  33.             "AREA_ID": "930013003"  
  34.         }, {  
  35.             "C0" :   "临夏州_和政县",  
  36.             "C1" :  46622.96,  
  37.             "C2" :  20954.97,  
  38.             "AREA_ID": "930013002"  
  39.         }, {  
  40.             "C0": "临夏州_东乡县",  
  41.             "C1" :  96021.84,  
  42.             "C2" :  16725.63,  
  43.             "AREA_ID" : "930013004"  
  44.         }, {  
  45.             "C0" : "临夏州_临夏市中心",  
  46.             "C1" : 1845311.12,  
  47.             "C2" : 129478.93,  
  48.             "AREA_ID" : "930013001"  
  49.         }, {  
  50.             "C0" : "天水市_秦州区",  
  51.             "C1" : 0,  
  52.             "C2" : 0,  
  53.             "AREA_ID" : "930013801"  
  54.         }, {  
  55.             "C0" :   "临夏州_积石山",  
  56.             "C1" :  256181.79,  
  57.             "C2" :  15185.98,  
  58.             "AREA_ID" : "930013007"  
  59.         }, {  
  60.             "C0" :   "酒泉_肃州区",  
  61.             "C1" :  264312,  
  62.             "C2" :  402.6,  
  63.             "AREA_ID" :   "930013701"  
  64.         }];  
  65.         var columns[{  
  66.             "cid": "C1",  
  67.             "ctext": "客户总收入"  
  68.         }, {  
  69.             "cid" :   "C2",  
  70.             "ctext" : "当月出账费用  
  71.         }];  
  72.         /**  
  73.           page:页码    pageSize:每页的记录条数  此方法除了传入page和pageSize之外，还应知道的有三个参数：   
  74.            一、表的全部数据，json串格式，可通过action查询数据库得到。  
  75.                二、表头所对应的列的key及名称，也是json串格式    
  76.            三、表所对应的id   
  77.            注：此处只是适合表头只有一行，且事先写好的情况。您可以根据需要改一下，逻辑思路就是这样，欢迎批评指正  
  78.          */  
  79.         function splitPage(page, pageSize) {  
  80.             alert(1)  
  81.             var table = document.getElementById("#page_table");  
  82.             var num = table.rows.length; //table.rows返回表格中包含的所有行，此处假设表由表头1行和表体N行组成  
  83.             alert(num);  
  84.             //清除tbody  
  85.             for (var i = num - 1; i > 0; i--) {  
  86.                 table.deleteRow(i);  
  87.             }  
  88.             var totalNums = tableData.length; //总行数  
  89.             var totalPage = Math.ceil(totalNums / pageSize); //总页数  
  90.             var begin = (page - 1) * pageSize; //页起始位置(包括)  
  91.             var end = page * pageSize; //页结束位置(不包括)  
  92.             end  =  end  > totalNums  ?  totalNums  :  end;   
  93.             //向tbody中写入数据  
  94.             var n = 1; //tbody的起始行  
  95.             for (var i = begin; i < end; i++) {  
  96.                 var row = table.insertRow(n++);  
  97.                 var rowData = tableData[i];  
  98.                 for (j = 0; j < columns.length; j++) {  
  99.                     var col = columns[j].cid;  
  100.                     var cell = row.insertCell(j);  
  101.                     var cellData = rowData[col];  
  102.                     cell.innerHTML = cellData;  
  103.                 }  
  104.             }  
  105.             //生成分页工具条  
  106.             varpageBar  =  "第" + page +  "页/共"  +  totalPage  +  "页"  +  " ";  
  107.             if (page > 1) {  
  108.                 pageBar  +=  "<a href=\"javascript:splitPage(" + 1 + ","  + pageSize + ");\">首页a> ";   
  109.             } else {  
  110.                 pageBar += "首页 ";  
  111.             }  
  112.             if  (page  >  1)  {  
  113.                 pageBar +=  "<a href=\"javascript:splitPage(" + (page - 1)  +  ","  + pageSize  + ");\">上一页a> ";     
  114.             }   
  115.             else  {  
  116.                 pageBar  += "上一页 ";  
  117.             }  
  118.             if (page < totalPage) {  
  119.                 pageBar  +=  "<a href=\"javascript:splitPage(" + (page + 1) + ","  + pageSize  + ");\">下一页a> ";     
  120.             }   
  121.             else  {  
  122.                 pageBar  += "下一页";   
  123.             }     
  124.             if  (page  < totalPage) {  
  125.                 pageBar  +=  "<a href=\"javascript:splitPage("  + (totalPage)  + ","  + pageSize + ");\">尾页a> ";     
  126.             }   
  127.             else  {  
  128.                 pageBar += "尾页 ";     
  129.             }     
  130.             document.getElementById("#page_bar").innerHTML =  pageBar;  
  131.         }  
  132.     script>  
  133.   
  134.     <body onload="splitPage(1,3)">  
  135.         <table id="page_table">  
  136.             <thead>  
  137.                 <tr>  
  138.                     <th>h1th>  
  139.                     <th>h2th>  
  140.                     <th>h3th>   
  141.                  tr>  
  142.             thead>  
  143.             <tbody>  
  144.                 <tr>  
  145.                     <td>111td>  
  146.                     <td>222td>  
  147.                     <td>333td>  
  148.                 tr>  
  149.             tbody>  
  150.             table>  
  151.             <div id="page_bar">div>  
  152.     body>  
  153.   
  154. html> 

你可能感兴趣的:(java编程中的问题)

  • 什么是高并发 ，详细讲解 大z小z 高并发高并发
    什么是高并发，详细讲解2017年11月20日22:36:01DreamWeaver_Zhou阅读数：81647更多个人分类：java编程中的问题所属专栏：JAVA结合其他开发语言做项目一、什么是高并发高并发（HighConcurrency）是互联网分布式系统架构设计中必须考虑的因素之一，它通常是指，通过设计保证系统能够同时并行处理很多请求。高并发相关常用的一些指标有响应时间（ResponseTim
  • More Java Pitfalls中文版 mexican javabeanservlet网络应用企业应用
    内 容 提 要 本书通过分析和探究Java编程中的问题，总结出高效的解决方案，帮助Java程序员克服实际编程工作中的“陷阱”。 全书分为3个部分，50个Items。第一部分“客户层”（22个Items）涵盖了J2ME和J2SE，讨论了在开发网络和独立客户应用程序时可能遇到的陷阱。第二部分“Web层”（14个Items）探讨了运行于Web容器内部的组件的陷阱。第三部分“企业层”（14个Ite
  • More.Java.Pitfalls中文版 itsenser java编程J2SE网络应用企业应用
    More.Java.Pitfalls中文版本书通过分析和探究Java编程中的问题，总结出高效的解决方案，帮助Java程序员克服实际编程工作中的“陷阱”。全书分为3个部分，50个Items。第一部分“客户层”（22个Items）涵盖了J2ME和J2SE，讨论了在开发网络和独立客户应用程序时可能遇到的陷阱。第二部分“Web层”（14个Items）探讨了运行于Web容器内部的组件的陷阱。第三部分“企业层
  • Java开发中，spring mvc 的线程怎么调用？ 小麦麦子 springmvc
    今天逛知乎，看到最近很多人都在问spring mvc 的线程http://www.maiziedu.com/course/java/ 的启动问题，觉得挺有意思的，那哥们儿问的也听仔细，下面的回答也很详尽，分享出来，希望遇对遇到类似问题的Java开发程序猿有所帮助。 问题：     在用spring mvc架构的网站上，设一线程在虚拟机启动时运行，线程里有一全局
  • maven依赖范围 bitcarter maven
    1.test 测试的时候才会依赖，编译和打包不依赖，如junit不被打包 2.compile 只有编译和打包时才会依赖 3.provided 编译和测试的时候依赖，打包不依赖，如：tomcat的一些公用jar包 4.runtime 运行时依赖，编译不依赖 5.默认compile 依赖范围compile是支持传递的，test不支持传递 1.传递的意思是项目A，引用
  • Jaxb org.xml.sax.saxparseexception : premature end of file darrenzhu xmlprematureJAXB
    如果在使用JAXB把xml文件unmarshal成vo(XSD自动生成的vo)时碰到如下错误： org.xml.sax.saxparseexception : premature end of file 很有可能时你直接读取文件为inputstream，然后将inputstream作为构建unmarshal需要的source参数。InputSource inputSource = new In
  • CSS Specificity 周凡杨 html权重Specificitycss
      有时候对于页面元素设置了样式，可为什么页面的显示没有匹配上呢？ because specificity CSS 的选择符是有权重的，当不同的选择符的样式设置有冲突时，浏览器会采用权重高的选择符设置的样式。     规则：   HTML标签的权重是1 Class 的权重是10 Id 的权重是100
  • java与servlet g21121 servlet
    servlet 搞java web开发的人一定不会陌生，而且大家还会时常用到它。 下面是java官方网站上对servlet的介绍： java官网对于servlet的解释 写道 Java Servlet Technology Overview Servlets are the Java platform technology of choice for extending and enha
  • eclipse中安装maven插件 510888780 eclipsemaven
    1.首先去官网下载 Maven： http://www.apache.org/dyn/closer.cgi/maven/binaries/apache-maven-3.2.3-bin.tar.gz 下载完成之后将其解压， 我将解压后的文件夹：apache-maven-3.2.3， 并将它放在 D:\tools目录下， 即 maven 最终的路径是：D:\tools\apache-mave
  • jpa@OneToOne关联关系 布衣凌宇 jpa
    Nruser里的pruserid关联到Pruser的主键id，实现对一个表的增删改，另一个表的数据随之增删改。 Nruser实体类 //***************************************************************** @Entity @Table(name="nruser") @DynamicInsert @Dynam
  • 我的spring学习笔记11-Spring中关于声明式事务的配置 aijuans spring事务配置
    这两天学到事务管理这一块，结合到之前的terasoluna框架，觉得书本上讲的还是简单阿。我就把我从书本上学到的再结合实际的项目以及网上看到的一些内容，对声明式事务管理做个整理吧。我看得Spring in Action第二版中只提到了用TransactionProxyFactoryBean和<tx:advice/>,定义注释驱动这三种，我承认后两种的内容很好，很强大。但是实际的项目当中
  • java 动态代理简单实现 antlove javahandlerproxydynamicservice
    dynamicproxy.service.HelloService package dynamicproxy.service; public interface HelloService { public void sayHello(); }   dynamicproxy.service.impl.HelloServiceImpl package dynamicp
  • JDBC连接数据库 百合不是茶 JDBC编程JAVA操作oracle数据库
             如果我们要想连接oracle公司的数据库，就要首先下载oralce公司的驱动程序，将这个驱动程序的jar包导入到我们工程中;   JDBC链接数据库的代码和固定写法;     1,加载oracle数据库的驱动;     &nb
  • 单例模式中的多线程分析 bijian1013 javathread多线程java多线程
    谈到单例模式，我们立马会想到饿汉式和懒汉式加载，所谓饿汉式就是在创建类时就创建好了实例，懒汉式在获取实例时才去创建实例，即延迟加载。 饿汉式： package com.bijian.study; public class Singleton { private Singleton() { } // 注意这是private 只供内部调用 private static
  • javascript读取和修改原型特别需要注意原型的读写不具有对等性 bijian1013 JavaScriptprototype
            对于从原型对象继承而来的成员，其读和写具有内在的不对等性。比如有一个对象A，假设它的原型对象是B，B的原型对象是null。如果我们需要读取A对象的name属性值，那么JS会优先在A中查找，如果找到了name属性那么就返回；如果A中没有name属性，那么就到原型B中查找name，如果找到了就返回；如果原型B中也没有
  • 【持久化框架MyBatis3六】MyBatis3集成第三方DataSource bit1129 dataSource
    MyBatis内置了数据源的支持，如：   <environments default="development"> <environment id="development"> <transactionManager type="JDBC" /> <data
  • 我程序中用到的urldecode和base64decode,MD5 bitcarter cMD5base64decodeurldecode
    这里是base64decode和urldecode，Md5在附件中。因为我是在后台所以需要解码： string Base64Decode(const char* Data,int DataByte,int& OutByte) { //解码表 const char DecodeTable[] = { 0, 0, 0, 0, 0, 0
  • 腾讯资深运维专家周小军：QQ与微信架构的惊天秘密 ronin47
    社交领域一直是互联网创业的大热门，从PC到移动端，从OICQ、MSN到QQ。到了移动互联网时代，社交领域应用开始彻底爆发，直奔黄金期。腾讯在过去几年里，社交平台更是火到爆，QQ和微信坐拥几亿的粉丝，QQ空间和朋友圈各种刷屏，写心得，晒照片，秀视频，那么谁来为企鹅保驾护航呢？支撑QQ和微信海量数据背后的架构又有哪些惊天内幕呢？本期大讲堂的内容来自今年2月份ChinaUnix对腾讯社交网络运营服务中心
  • java-69-旋转数组的最小元素。把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素 bylijinnan java
    public class MinOfShiftedArray { /** * Q69 旋转数组的最小元素 * 把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素。 * 例如数组{3, 4, 5, 1, 2}为{1, 2, 3, 4, 5}的一个旋转，该数组的最小值为1。 */ publ
  • 看博客，应该是有方向的 Cb123456 反省看博客
    看博客，应该是有方向的:  我现在就复习以前的，在补补以前不会的，现在还不会的，同时完善完善项目，也看看别人的博客.  我刚突然想到的:  1.应该看计算机组成原理，数据结构，一些算法，还有关于android,java的。  2.对于我，也快大四了，看一些职业规划的，以及一些学习的经验，看看别人的工作总结的.    为什么要写
  • [开源与商业]做开源项目的人生活上一定要朴素,尽量减少对官方和商业体系的依赖 comsci 开源项目
         为什么这样说呢？  因为科学和技术的发展有时候需要一个平缓和长期的积累过程，但是行政和商业体系本身充满各种不稳定性和不确定性，如果你希望长期从事某个科研项目，但是却又必须依赖于某种行政和商业体系，那其中的过程必定充满各种风险。。。       所以，为避免这种不确定性风险，我
  • 一个 sql优化 （[精华] 一个查询优化的分析调整全过程！很值得一看 ） cwqcwqmax9 sql
    见   http://www.itpub.net/forum.php?mod=viewthread&tid=239011 Web翻页优化实例 提交时间: 2004-6-18 15:37:49      回复    发消息  环境： Linux ve
  • Hibernat and Ibatis dashuaifu Hibernateibatis
    Hibernate  VS  iBATIS 简介 Hibernate 是当前最流行的O/R mapping框架，当前版本是3.05。它出身于sf.net，现在已经成为Jboss的一部分了 iBATIS 是另外一种优秀的O/R mapping框架，当前版本是2.0。目前属于apache的一个子项目了。 相对Hibernate“O/R”而言，iBATIS 是一种“Sql Mappi
  • 备份MYSQL脚本 dcj3sjt126com mysql
    #!/bin/sh # this shell to backup mysql #[email protected] (QQ:1413161683 DuChengJiu) _dbDir=/var/lib/mysql/ _today=`date +%w` _bakDir=/usr/backup/$_today [ ! -d $_bakDir ] && mkdir -p
  • iOS第三方开源库的吐槽和备忘 dcj3sjt126com ios
    转自 ibireme的博客   做iOS开发总会接触到一些第三方库，这里整理一下，做一些吐槽。   目前比较活跃的社区仍旧是Github，除此以外也有一些不错的库散落在Google Code、SourceForge等地方。由于Github社区太过主流，这里主要介绍一下Github里面流行的iOS库。   首先整理了一份 Github上排名靠
  • html wlwmanifest.xml eoems htmlxml
    所谓优化wp_head()就是把从wp_head中移除不需要元素，同时也可以加快速度。 步骤： 加入到function.php remove_action('wp_head', 'wp_generator'); //wp-generator移除wordpress的版本号，本身blog的版本号没什么意义，但是如果让恶意玩家看到，可能会用官网公布的漏洞攻击blog remov
  • 浅谈Java定时器发展 hacksin java并发timer定时器
    java在jdk1.3中推出了定时器类Timer,而后在jdk1.5后由Dou Lea从新开发出了支持多线程的ScheduleThreadPoolExecutor，从后者的表现来看，可以考虑完全替代Timer了。 Timer与ScheduleThreadPoolExecutor对比： 1.    Timer始于jdk1.3,其原理是利用一个TimerTask数组当作队列
  • 移动端页面侧边导航滑入效果 ini jqueryWebhtml5cssjavascirpt
    效果体验：http://hovertree.com/texiao/mobile/2.htm可以使用移动设备浏览器查看效果。效果使用到jquery-2.1.4.min.js，该版本的jQuery库是用于支持HTML5的浏览器上，不再兼容IE8以前的浏览器，现在移动端浏览器一般都支持HTML5，所以使用该jQuery没问题。HTML文件代码： <!DOCTYPE html> <h
  • AspectJ+Javasist记录日志 kane_xie aspectjjavasist
    在项目中碰到这样一个需求，对一个服务类的每一个方法，在方法开始和结束的时候分别记录一条日志，内容包括方法名，参数名+参数值以及方法执行的时间。   @Override public String get(String key) { // long start = System.currentTimeMillis(); // System.out.println("Be
  • redis学习笔记 MJC410621 redisNoSQL
    1)nosql数据库主要由以下特点：非关系型的、分布式的、开源的、水平可扩展的。 1，处理超大量的数据 2，运行在便宜的PC服务器集群上， 3，击碎了性能瓶颈。 1)对数据高并发读写。 2)对海量数据的高效率存储和访问。 3)对数据的高扩展性和高可用性。 redis支持的类型： Sring 类型 set name lijie get name lijie set na
  • 使用redis实现分布式锁 qifeifei
    在多节点的系统中，如何实现分布式锁机制，其中用redis来实现是很好的方法之一，我们先来看一下jedis包中，有个类名BinaryJedis,它有个方法如下：   public Long setnx(final byte[] key, final byte[] value) { checkIsInMulti(); client.setnx(key, value); ret
  • BI并非万能，中层业务管理报表要另辟蹊径 张老师的菜 大数据BI商业智能信息化
           BI是商业智能的缩写，是可以帮助企业做出明智的业务经营决策的工具，其数据来源于各个业务系统，如ERP、CRM、SCM、进销存、HER、OA等。        BI系统不同于传统的管理信息系统，他号称是一个整体应用的解决方案，是融入管理思想的强大系统：有着系统整体的设计思想，支持对所有
  • 安装rvm后出现rvm not a function 或者ruby -v后提示没安装ruby的问题 wudixiaotie function
    1.在~/.bashrc最后加入 [[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"  2.重新启动terminal输入：   rvm use ruby-2.2.1 --default  把当前安装的ruby版本设为默
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他