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

<!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. 【转】Parcelable, Serializable，Cloneable，copyProperties

    Copying ... https://blog.csdn.net/max2005/article/details/78325036 存在着三件事,整理如下 Parcelable, Serializa ...

  2. applicationContext.xml配置Spring样板

    <?xml version="1.0" encoding="UTF-8" ?><beans xmlns:xsi="http://ww ...

  3. 第26月第26天 Domain=AVFoundationErrorDomain Code=-11850

    1. curl -voa http://119.29.108.104:8080/inweb01/kotlin.mp4 -H "Range:bytes=0-1" https://al ...

  4. Flume配置Failover Sink Processor

    1 官网内容 2 看一张图一目了然 3 详细配置 source配置文件 #配置文件: a1.sources= r1 a1.sinks= k1 k2 a1.channels= c1 #负载平衡 a1.s ...

  5. scrapy模拟用户登录

    scrapy框架编写模拟用户登录的三种方式: 方式一:携带cookie登录,携带cookie一般请求的url为登录后的页面,获取cookie信息应在登录后的页面获取,cookie参数应转成字典形式 # ...

  6. 用SQLAlchemy创建一对多，多对多关系表

    多对多关系表的创建: 如果建立好多对多关系后,我们就可以通过关系名进行循环查找,比如laowang = Teacher.query.filter(Teacher.name=='laowang').fi ...

  7. 前端与后端的数据交互（jquery ajax+python flask）

    前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的数据发送与接收 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收 ...

  8. linux 基础笔记本

    ubuntu 端口使用查看 查看已经连接的服务端口(ESTABLISHED) netstat -a 查看所有的服务端口(LISTEN,ESTABLISHED) netstat -ap 查看指定端口,可 ...

  9. Log4Net配置日志

    1.log4net 1)新建一个Net空白项目,在引用出点击管理NuGet程序包,搜索log4net并安装 2)建立log4net.config配置文件 在configuration里面添加如下代码, ...

  10. package-lock.json和package.json区别

    package.json里面定义的是版本范围(比如^1.0.0),具体跑npm install的时候安的什么版本,要解析后才能决定,这里面定义的依赖关系树,可以称之为逻辑树(logical tree) ...