直接调用:

<style type="text/css">  
         th
         {
             font-size:18px;
             }
         td
         {
             font-size:15px;
             }
     table{  
         width:600px;  
         text-align:center;  
         }  
     table tr th,td{  
         height:30px;  
         line-height:30px;  
         border:1px solid #ccc;  
         }  
      #pageStyle{  
         display:inline-block;  
         width:32px;  
         height:32px;  
         border:1px solid #CCC;  
         line-height:32px;  
         text-align:center;  
         color:#999;  
         margin-top:20px;  
         text-decoration:none;  
      
         }  
      #pageStyle:hover{  
          background-color:#CCC;  
          }  
      #pageStyle .active{  
          background-color:#0CF;  
          color:#ffffff;  
          }        
         .style1
         {
             font-size: 12pt;
         }
    </style>

<script type="text/javascript">
    //分頁顯示
        $(function () {
            var $table = $("table");
            var currentPage = 0; //当前页默认值为0  
            var pageSize = 12; //每一页显示的数目  
            $table.bind('paging', function () {
                $table.find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
            });
            var sumRows = $table.find('tbody tr').length;
            var sumPages = Math.ceil(sumRows / pageSize); //总页数

var $pager = $('<div class="page"></div>');  //新建div,放入a标签,显示底部分页码  
            for (var pageIndex = 0; pageIndex < sumPages; pageIndex++) {
                $('<a href="#" id="pageStyle" onclick="changCss(this)"><span>' + (pageIndex + 1) + '</span></a>').bind("click", { "newPage": pageIndex }, function (event) {
                    currentPage = event.data["newPage"];
                    $table.trigger("paging");
                    //触发分页函数  
                }).appendTo($pager);
                $pager.append(" ");
            }
            $pager.insertAfter($table);
            $table.trigger("paging");

//默认第一页的a标签效果  
            var $pagess = $('#pageStyle');
            $pagess[0].style.backgroundColor = "#006B00";
            $pagess[0].style.color = "#ffffff";
        });

//a链接点击变色,再点其他回复原色  
        function changCss(obj) {
            var arr = document.getElementsByTagName("a");
            for (var i = 0; i < arr.length; i++) {
                if (obj == arr[i]) {       //当前页样式  
                    obj.style.backgroundColor = "#006B00";
                    obj.style.color = "#ffffff";
                }
                else {
                    arr[i].style.color = "";
                    arr[i].style.backgroundColor = "";
                }
            }
        }      
    </script>

javascript实现Html Table数据表分页的更多相关文章

  1. MySQL的数据库,数据表,数据的操作

    数据库简介 概念 什么是数据库?简单来说,数据库就是存储数据的"仓库", 但是,光有数据还不行,还要管理数据的工具,我们称之为数据库管理系统! 数据库系统 = 数据库管理系统 + ...

  2. SQL Server 的数据表简单操作

    --创建数据表--[use 要创建数据表的数据库名称go]create table 要创建的表名(字段名 数据类型[长度] [null | not null] [primary key],... .. ...

  3. MySQL(一) 数据表数据库的基本操作

    序言 这类文章,记录我看<MySQL5.6从零开始学>这本书的过程,将自己觉得重要的东西记录一下,并有可能帮助到你们,在写的博文前几篇度会非常基础,只要动手敲,跟着我写的例子全部实现一遍, ...

  4. MYSQL中约束及修改数据表

    MYSQL中约束及修改数据表 28:约束约束保证数据的完整性和一致性约束分为表级约束和列级约束约束类型包括:    NOT NULL(非空约束)    PRIMARY KEY(主键约束)    UNI ...

  5. php 实现 mysql数据表优化与修复

    <?php $link = mysql_connect("localhost", "root", "") or die("e ...

  6. mysql数据表的基本操作:表结构操作,字段操作

    本节介绍: 表结构操作 创建数据表. 查看数据表和查看字段. 修改数据表结构 删除数据表 字段操作 新增字段. 修改字段数据类型.位置或属性. 重命名字段 删除字段 首发时间:2018-02-18  ...

  7. 数据库之mysql篇(3)—— mysql创建/修改数据表/操作表数据

    创建数据表:create table 数据表名 1.创建表规范 create table 表名( 列名   数据类型    是否为空   自动排序/默认值  主键/外键/唯一键, 列名   数据类型 ...

  8. Mysql——数据库和数据表的基本操作

    /*创建数据库--- CREATE DATABASE 数据库名;*/ CREATE DATABASE itschool; /*查看已经存在的数据库*/ SHOW DATABASES; /*查看某个已创 ...

  9. MySQL开发——【数据库、数据表的基本操作】

    启动MySQL服务器端 CMD启动MySQL服务器端 net start(启动)|stop(停止)|restart(重启)服务名称(mysql) 连接MySQL服务器端 CMD连接MySQL服务器端 ...

随机推荐

  1. 微信小程序之对象转化为数组

    对象转成数组方式一(数组里面是一个个number类型的元素) let dictObject= { , , , , }; // 对象转成数组方式一 var createArr = [] for (let ...

  2. 手写C++代码实现POST传输数据

    char *pHttpPost = "POST %s HTTP/1.1\r\n" "Host: %s:%d\r\n" "Content-Type: a ...

  3. Tools - 笔记记录方法Markdown

    Markdown 简介 轻量级标记语言,使用易读易写的纯文本格式和类似HTML的标记语法来编写具有一定的格式的文档. 语法简洁直观,易学易用,可以使用任何喜爱的文本编辑器来阅读和写作. 可精- 确控制 ...

  4. netstat -anp/ss -t里的Send-Q和Recv-Q含义

    Send-Q 对方没有收到的数据或者说没有Ack的,还在本地缓冲区 Recv-Q 数据已经在本地接收缓冲区,但是还没有recv() The count of bytes not copied by t ...

  5. 【馨儿收藏】群星《2019最新好听DJ舞曲精选》全系列【WAV/在线/百度】(持续更新)

    本人作为一名音乐发烧友,一直喜欢追求无损音乐,平时在开发编程无聊的时候,希望享受音乐的过程,追求完美,我这边整理了一系列的比较不错,新的好听的无损音乐,希望大家能够喜欢. [馨儿收藏]群星<20 ...

  6. Vue Router路由管理器介绍

    参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...

  7. 在搭建Hadoop集群环境时遇到的一些问题

    最近在学习搭建hadoop集群环境,在搭建的过程中遇到很多问题,在这里做一些记录.1. SSH相关的问题 问题一: ssh: connect to host localhost port 22: Co ...

  8. 洛谷 题解 UVA1395 【苗条的生成树 Slim Span】

    [题意] 给出一个\(n(n<=100)\)个节点的的图,求最大边减最小边尽量小的生成树. [算法] \(Kruskal\) [分析] 首先把边按边权从小到大进行排序.对于一个连续的边集区间\( ...

  9. iText输出中文

    使用iTextAsian.jar中的字体 BaseFont.createFont("STSong-Light", "UniGB-UCS2-H",BaseFont ...

  10. 【leetcode算法-简单】26. 删除排序数组中的重复项

    [题目描述] 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完 ...