直接上代码，复制出来就可以使用

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  7.     <title>点标记</title>
  8.     <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  9.  
  10.     <script>
  11.         $(function () {
  12.             var $table = $('table');
  13.             var currentPage = 0;//当前页默认值为0
  14.             var pageSize = 5;//每一页显示的数目
  15.             $table.bind('paging', function () {
  16.                 $table.find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
  17.             });
  18.             var sumRows = $table.find('tbody tr').length;
  19.             var sumPages = Math.ceil(sumRows / pageSize);//总页数
  20.  
  21.             var $pager = $('<div class="page"></div>');  //新建div，放入a标签,显示底部分页码
  22.             for (var pageIndex = 0 ; pageIndex < sumPages ; pageIndex++) {
  23.                 $('<a href="#" id="pageStyle" onclick="changCss(this)"><span>' + (pageIndex + 1) + '</span></a>').bind("click", { "newPage": pageIndex }, function (event) {
  24.                     currentPage = event.data["newPage"];
  25.                     $table.trigger("paging");
  26.                     //触发分页函数
  27.                 }).appendTo($pager);
  28.                 $pager.append(" ");
  29.             }
  30.             $pager.insertAfter($table);
  31.             $table.trigger("paging");
  32.  
  33.             //默认第一页的a标签效果
  34.             var $pagess = $('#pageStyle');
  35.             $pagess[0].style.backgroundColor = "#006B00";
  36.             $pagess[0].style.color = "#ffffff";
  37.         });
  38.  
  39.         //a链接点击变色，再点其他回复原色
  40.         function changCss(obj) {
  41.             var arr = document.getElementsByTagName("a");
  42.             for (var i = 0; i < arr.length; i++) {
  43.                 if (obj == arr[i]) {       //当前页样式
  44.                     obj.style.backgroundColor = "#006B00";
  45.                     obj.style.color = "#ffffff";
  46.                 }
  47.                 else {
  48.                     arr[i].style.color = "";
  49.                     arr[i].style.backgroundColor = "";
  50.                 }
  51.             }
  52.         }
  53.     </script>
  54.  
  55.     <style type="text/css">
  56.         table {
  57.             width: 600px;
  58.             text-align: center;
  59.         }
  60.  
  61.             table tr th, td {
  62.                 height: 30px;
  63.                 line-height: 30px;
  64.                 border: 1px solid #ccc;
  65.             }
  66.  
  67.         #pageStyle {
  68.             display: inline-block;
  69.             width: 32px;
  70.             height: 32px;
  71.             border: 1px solid #CCC;
  72.             line-height: 32px;
  73.             text-align: center;
  74.             color: #999;
  75.             margin-top: 20px;
  76.             text-decoration: none;
  77.         }
  78.  
  79.             #pageStyle:hover {
  80.                 background-color: #CCC;
  81.             }
  82.  
  83.             #pageStyle .active {
  84.                 background-color: #0CF;
  85.                 color: #ffffff;
  86.             }
  87.     </style>
  88. </head>
  89. <body>
  90.     <table cellspacing="0">
  91.         <thead>
  92.             <tr>
  93.                 <th>编号</th>
  94.                 <th>姓名</th>
  95.                 <th>性别</th>
  96.             </tr>
  97.         </thead>
  98.         <tbody>
  99.             <tr>
  100.                 <td>1</td>
  101.                 <td>张飞</td>
  102.                 <td>男</td>
  103.             </tr>
  104.             <tr>
  105.                 <td>2</td>
  106.                 <td>刘备</td>
  107.                 <td>男</td>
  108.             </tr>
  109.             <tr>
  110.                 <td>3</td>
  111.                 <td>关羽</td>
  112.                 <td>男</td>
  113.             </tr>
  114.             <tr>
  115.                 <td>4</td>
  116.                 <td>妲己</td>
  117.                 <td>女</td>
  118.             </tr>
  119.             <tr>
  120.                 <td>5</td>
  121.                 <td>后羿</td>
  122.                 <td>男</td>
  123.             </tr>
  124.             <tr>
  125.                 <td>6</td>
  126.                 <td>大乔</td>
  127.                 <td>女</td>
  128.             </tr>
  129.             <tr>
  130.                 <td>7</td>
  131.                 <td>露娜</td>
  132.                 <td>女</td>
  133.             </tr>
  134.             <tr>
  135.                 <td>8</td>
  136.                 <td>E.Z</td>
  137.                 <td>男</td>
  138.             </tr>
  139.             <tr>
  140.                 <td>9</td>
  141.                 <td>琴女</td>
  142.                 <td>女</td>
  143.             </tr>
  144.             <tr>
  145.                 <td>10</td>
  146.                 <td>貂蝉</td>
  147.                 <td>女</td>
  148.             </tr>
  149.         </tbody>
  150.  
  151.     </table>
  152.  
  153. </body>
  154. </html>

Jquyer table 中的数据分页的更多相关文章

  1. js穿梭框；将两个table中的数据选中移动

    将table中选中的数据移动到右边: 点击一行中的任意一个位置,使其选中: 注:attr()和prop()都是jquery的方法: .attr() : 获取匹配的元素集合中的第一个元素的属性的值 或 ...

  2. Oracle中的数据分页

    --数据分页脚本 --创建包含数据分页代码元素声明的包头结构create or replace package data_controlis type type_cursor_data is ref ...

  3. 向已有的table中插入数据

    table: <table id="seleted-table" class="table table-bordered table-hover" sty ...

  4. 自我反思--table的简单数据分页

      自我反思   几天没有写工作总结了,整个人都变得懒散了.公司的工作也确实是不紧张,对于我这种自制力不强的人简直是...(想不到词了),完全放了风了... 每天逛逛淘宝,买些乱七八糟其实并没有什么用 ...

  5. table中实现数据上移下移效果

    html 由于vue+Element项目中的table,没有开放的上移下移的api,但是能对数据操作,故思路为数组中的一条数据,再重新添加一条数据,办法有点笨,但是好歹也是实现了,望有好的办法的,请留 ...

  6. table中填写数据并批量增加

    <table class = "table jtable table-bordered table-striped hide" id = "table_1" ...

  7. 向多页TABLE中插入数据时，新增行总是在当前页的最后一行

    CODE IN CO OATableBean table = (OATableBean)webBean.findChildRecursive("LineTable"); int n ...

  8. 执行相应操作后，将表单及table中数据清空

    使用 ccms.util.clearForm('要清空的表单的id'); $("#table中显示数据部分的id").empty();

  9. 在element的table修改事件中修改数据，table的数据也会修改

    大家在修改的时候有的会通过点击事件里面获取点击列表的值然后去赋值,但是row是Object对象类型,如果直接赋值的话,就变成了浅拷贝,复制的是地址,导致在表单中改变值的时候table中的数据也跟着改变 ...

随机推荐

  1. git 提交解决冲突(转载)

    转载 git 提交解决冲突 http://www.cnblogs.com/qinbb/p/5972308.html   一:git命令在提交代码前,没有pull拉最新的代码,因此再次提交出现了冲突. ...

  2. 二十三、Linux 进程与信号---进程链和进程扇、守护进程和孤儿进程以及僵尸进程

    23.1 进程链和进程扇 23.1.1 概念 进程链:一个父进程构建出一个子进程,子进程再构建出子子进程,子子进程构建出子子子进程.... 这种就为进程链 进程扇:一个父进程构建出多个子进程,子进程都 ...

  3. Volatile关键字理解

    Volatile定义 为了确保共享变量能被准确和一致的更新,线程应该确保通过排他锁单独获得这个变量.Java语言提供了volatile,在某些情况下比锁更加方便.如果一个字段被声明成volatile, ...

  4. 第25月第11天 deeplearning.ai

    1.网易云课堂 深度学习工程师 点击进入课程地址(英文)(收费) 点击进入课程地址(中文)(免费) 第一门 神经网络和深度学习 第二门 改善神经网络 第三门 结构化机器学习项目 第四门 卷积神经网络 ...

  5. js监听浏览器返回事件

    $(function(){ pushHistory(); window.addEventListener("popstate", function(e) { window.loca ...

  6. CSL 的字符串(单调栈)

    题目链接:https://ac.nowcoder.com/acm/contest/551/D 题目大意: 题目描述 CSL 以前不会字符串算法,经过一年的训练,他还是不会……于是他打算向你求助. 给定 ...

  7. Light oj 1099 - Not the Best 次短路

    题目大意:求次短路. 题目思路:由于可能存在重边的情况所以不能采用邻接矩阵储存图,我用了邻接表来存图. 由起点S到终点E的次短路可能由以下情况组成: 1.S到v点的次短路 + v到E的距离 2.S到v ...

  8. Light oj 1018 - Brush (IV) 状态压缩

    题目大意: 给出n个点的坐标,求至少画多少掉直线才能连接所有点. 题目思路:状态压缩 首先经行预处理,求出所有状态下,那些点不在该状态内 以任意两点为端点求出这条直线的状态 枚举所有状态,找出不在当前 ...

  9. C++中，有哪4种与类型转换相关的关键字？各有什么特点？应该在什么场合下使用？

    转:https://www.cnblogs.com/mjiang2017/p/9358032.html C++中,四个与类型转换相关的关键字:static_cast.const_cast.reinte ...

  10. windows下flazr对rtmp视频流进行压力测试（批量直播测试）

    flazr-0.7-RC2下载地址:百度网盘 提取码:nu05 简述:通过推流软件推送摄像头视频流到nginx流媒体服务器,获取nginx流媒体服务器上的视频流,在windows下使用flazr软件进 ...