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

<!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. jquery添加

    添加新内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() ...

  2. UML之涉众/参与者（角色/执行者）(Actor)/业务主角(BusinessActor)/业务工人(BusinessWorker)/用户/角色辨析【图解】

    参考文档: [业务建模](http://www.baike.com/wiki/%E4%B8%9A%E5%8A%A1%E5%BB%BA%E6%A8%A1) [UML 核心元素之参与者](http://w ...

  3. JQuery之Attr()与Prop()方法

    一.Prop()的由来 JQuery 1.6开始 新增方法prop() prop()解决:表单元素中checked,selected,disabled等属性在方法attr()中可能会出现的不一致问题( ...

  4. Django之CRM项目Day3-客户展示及分页

    1.展示客户 模板的查找顺序: ​ 先找全局的templates--> 按照app的注册顺序找templates中的文件 使用admin添加数据: 创建超级用户 python manage.py ...

  5. node里面的buffer理解

    node提供了专门读写文件的模块,文件内容都是2进制存放在内存中的 node读取文件的结果都是16进制,那么你要学会进制转换,二进制0b开头 ,八进制0开头,十六进制0x 基础知识: 1字节=8bit ...

  6. eslint 关于CRLF或者LF报错

    在拉取项目代码时,如果有eslint代码校验,但是本地打开会有于CRLF或者LF报错报错,那么怎么处理呢? git有个自动转换换行符功能,在文件commit时会自动转换换行符格式: 不想使用,也可以通 ...

  7. git修改历史记录

     1.git stash2.git rebase 45c2d5c --interactive 3.git stash pop4.git add5.git commit --amend      确认编 ...

  8. BZOJ4921「Lydsy1706月赛」互质序列

    吐槽一下BZOJ没有C++11  题还是不难的 BZOJ 4921 题意 在长度为$ n$的数列中去掉非空的连续一段并保证剩下数字不少于$ 2$ 求合法的所有方案中剩下数字的最大公约数的总和 $Sol ...

  9. java基础梳理--朝花夕拾（二）

    1.Java语言语法规则和文件格式: 第一个Java程序:/** 第一个Java程序:控制台输出Hello world!*/public class Test{    //访问修饰符 class关键词 ...

  10. 【转】Python标准模块--importlib

    [转]Python标准模块--importlib 作者:zhbzz2007 出处:http://www.cnblogs.com/zhbzz2007 欢迎转载,也请保留这段声明.谢谢! 1 模块简介 P ...