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

<!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. MySQL-5.7数据库主从同步实战教程

    主从形式 MySQ主从复制原理(主库写入数据,从库读取数据) MySql常用命令: MySQL5.7设置密码 ') where user='root': MySQL5.6设置密码 ') WHERE U ...

  2. java基础之自定义异常类及throw和throws的区别

    一.异常的架构: Throwable类:所以异常类都是Throwable的子类,它派生两个子类 Error和Exception. Error类:表示仅靠程序本身无法恢复的的严重错误,比如内存溢出,虚拟 ...

  3. PHP7语法知识（一）：语言基础

    一.数据类型 1.字符串: 2.整形: var_dump函数:返回变量的数据类型和值. 3.浮点型: 4.布尔型: 5.数组: 6.对象: 7.NULL值 二.运算符 1.算术运算符: 2.递增递减运 ...

  4. Hadoop之HDFS思维导图

  5. jq的load

    1.用于监听加载是否完成 当指定的元素(及子元素)已加载时,会发生 load() 事件. 该事件适用于任何带有 URL 的元素(比如图像.脚本.框架.内联框架). 根据不同的浏览器(Firefox 和 ...

  6. Menu显示三个点,不显示内容

    先说下menu的使用 首先自定义一个menu选项 <menu xmlns:android="http://schemas.android.com/apk/res/android&quo ...

  7. mysql 案例 ~ mysql主从复制错误问题

    简介 mysql主从不同步的几种情况 一  具体情况   1 主库有memory引擎的内存表      分析 由于memory表的数据存放在内存中,一旦主库数据丢失,从库可能就会发生数据复制异常    ...

  8. Windows 7 SP1无人值守自动应答文件制作

    使用U盘安装Windows系统时,很多人都会使用UltraISO工具来制作U盘启动盘,然后插入到电脑中加以安装.系统的安装过程中,需要一步一步手动选择或者输入配置,Windows是支持无人值守自动应答 ...

  9. Android小知识汇总

    1.Android Studio 将module编译打包成aar文件,module依赖的 (例如 compile 'com.zhy:autolayout:1.4.3' )不会被打包进入aar文件,应用 ...

  10. 实现Comet(服务器推送)的两种方式：长轮询和http流

    Comet 是一种高级的Ajax技术,实现了服务器向页面实时推送数据的技术,应用场景有体育比赛比分和股票报价等. 实现Comet有两种方式:长轮询与http流 长轮询是短轮询的翻版,短轮询的方式是:页 ...