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

<!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. VS Code使用 Vue工程配置 eslint

    首先确保VS Code 安装了 Vetur 和 Eslint 插件. VS CODE :文件 ＝>首选项 ＝> 设置   (有3个点 或 {} 这样的大括号,打开setting.json) ...

  2. swift之函数式编程

    函数式编程初探 最近初学swift,和OC比,发现语言更现代,也有了更多的特性.如何写好swift代码,也许,熟练使用新特性写出更优秀的代码,就是答案.今天先从大的方向谈谈swift中的编程范式-函数 ...

  3. Linux 文件大小查找排序

    du -sh 文件大小查询: 1.当前目录的大小: du -sh | sort 2.当前 目录下的文件大小: ls -lsh 3.当前目录 下的文件大小排序: du -sh * |sort -n 4. ...

  4. Debian Security Advisory(Debian安全报告) DSA-4412-1 drupal7 security update

    Debian Security Advisory(Debian安全报告) DSA-4412-1 drupal7 security update Package:drupal7 CVE ID:暂无 Dr ...

  5. myeclipse svn JavaHL(JNT) 不能使用的问题?

    分析:根据官方文档描述,64位的myeclipse 需要安装一个Subversion文件,否则会出现 not JavaHL(JNT),需要安装才能使用svn. 解决方案1:安装一个Setup-Subv ...

  6. mvc中异常页面的设置

    参考原文: http://blog.csdn.net/zjlovety/article/details/48734791 这种异常处理就是说,在mvc发生未处理异常时,对用户展示的页面. 第一种能被m ...

  7. git 新建分支

    创建分支   git checkout -b 分支名 推送到远程   git push origin 分支名

  8. MVC_Route层层深入

    1.前期准备 新建一个MVC项目,并添加Home和About两个控制器 在这两个控制器对应添加index页面 namespace Study_MVC_Route.Controllers { publi ...

  9. jQuery源码分析学习--资料收集--更新中

    1.逐行分析jQuery源码的奥秘 - 网易云课堂  http://study.163.com/course/courseMain.htm?courseId=465001#/courseDetail? ...

  10. EL表达式 EL函数 自定义el函数 《黑马程序员_超全面的JavaWeb视频教程vedio》

    \JavaWeb视频教程_day12_自定义标签JSTL标签库,java web之设计模式\day12_avi\12.EL入门.avi; EL表达式 1. EL是JSP内置的表达式语言! * jsp2 ...