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

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

    <title>点标记</title>

    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

    <script>

        $(function () {

            var $table = $('table');

            var currentPage = 0;//当前页默认值为0

            var pageSize = 5;//每一页显示的数目

            $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>

    <style type="text/css">

        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;

            }

    </style>

</head>

<body>

    <table cellspacing="0">

        <thead>

            <tr>

                <th>编号</th>

                <th>姓名</th>

                <th>性别</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>张飞</td>

                <td>男</td>

            </tr>

            <tr>

                <td>2</td>

                <td>刘备</td>

                <td>男</td>

            </tr>

            <tr>

                <td>3</td>

                <td>关羽</td>

                <td>男</td>

            </tr>

            <tr>

                <td>4</td>

                <td>妲己</td>

                <td>女</td>

            </tr>

            <tr>

                <td>5</td>

                <td>后羿</td>

                <td>男</td>

            </tr>

            <tr>

                <td>6</td>

                <td>大乔</td>

                <td>女</td>

            </tr>

            <tr>

                <td>7</td>

                <td>露娜</td>

                <td>女</td>

            </tr>

            <tr>

                <td>8</td>

                <td>E.Z</td>

                <td>男</td>

            </tr>

            <tr>

                <td>9</td>

                <td>琴女</td>

                <td>女</td>

            </tr>

            <tr>

                <td>10</td>

                <td>貂蝉</td>

                <td>女</td>

            </tr>

        </tbody>

    </table>

</body>

</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. getnameinfo函数

    一.函数原型 #include <netdb.h> int getnamefo(const struct sockaddr *sockaddr, socklen_t addrlen, ch ...

  2. faster rcnn相关内容

    转自: https://zhuanlan.zhihu.com/p/31426458 faster rcnn的基本结构 Faster RCNN其实可以分为4个主要内容: Conv layers.作为一种 ...

  3. ArrayList的底层实现

    package zy809; public class myArrayList { /** 存放元素 */ private Object[] data;// 创建一个数组引用. /** 元素的个数 * ...

  4. 获取对象的key值,并保存在数组中

    const itm = { a:1, b:2, c:3 } //Object.keys获取对象的属性,再遍历 Object.keys(itm).forEach(function(key,i,v){ c ...

  5. iTOP-6818开发板支持AXP228电源管理[官方推荐最佳匹配]_支持动态调频

    iTOP-6818开发板与4418开发板共兼容同一底板: 核心板:::::: 尺寸 50mm*60mm 高度 核心板连接器组合高度1.5mm PCB层数 6层PCB沉金设计 4418 CPU ARM ...

  6. Python 21 Django 实用小案例1

    实用案例 验证码与验证   KindEditor      组合搜索的实现 单例模式      beautifulsoup4 验证码与验证 需要安装Pillow模块 pip stall pillow ...

  7. Delete 和 Put 请求失效， Spring 框架

    Delete 和 Put 请求失效, Spring 框架 原因:使用tomcat 启动Spring项目的时候,请求失效.因为tomcat 不支持 Delete 和 Put 在 Web.xml 中增加下 ...

  8. mysql 案例 ~超时时间设置

    一 简介:今天咱们来谈谈mysql的连接时间与会话关系二 分类  mysql会话分类  1 程序连接session(最主要的)  2 binlog连接session(复制+canal消费)  3 ro ...

  9. Light oj 1021 - Painful Bases

    题意:  给一个B进制的数,一个10进制的数K,B进制数有x位, 对着x位进行全排列的话,有x!种可能, 问这x!的可能中,有多少种可以整除K,各个位置上的数字都不同. 思路:状态压缩,数位DP #i ...

  10. 动态规划 - 213. House Robber II

    URL: https://leetcode.com/problems/house-robber-ii/ You are a professional robber planning to rob ho ...