功能描述：

（1）设定起始页位置和每页的大小；

（2）绑定自定义的分页事件，在事件中隐藏当前页不需要显示的行；

（3）为表格添加页链接；

（4）绑定链接的单击事件，在事件中触发表格分页事件。

效果图：

实现代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>

    <style media="screen">

        table {

            border-collapse: collapse;

            border-color: rgba(205, 193, 222, 0.84);

        }

    </style>

</head>

<body>

    <table border="1">

        <thead>

            <tr>

                <th>

                    &nbsp;编号&nbsp;

                </th>

                <th>

                    &nbsp;语言&nbsp;

                </th>

                <th>

                    &nbsp;课时&nbsp;

                </th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>c001</td>

                <td>c#</td>

                <td>80</td>

            </tr>

            <tr>

                <td>c002</td>

                <td>Java</td>

                <td>70</td>

            </tr>

            <tr>

                <td>c003</td>

                <td>PHP</td>

                <td>60</td>

            </tr>

            <tr>

                <td>c004</td>

                <td>Perl</td>

                <td>50</td>

            </tr>

        </tbody>

    </table>

   <script>

        $(document).ready(function() {

            var $table = $('table');

            var currentPage = 0;     //当前页索引

            var pageSize = 2;    //每页行数（不包括表头）

            $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

            for(var pageIndex = 0;pageIndex < sumPages;pageIndex++){

                //为分页标签加上链接

                $("<a href='#'><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');      //触发分页事件

        });

    </script>

</body>

</html>

【Demo】jQuery 设置简单的分页的更多相关文章

  1. Jquery实现简单的分页

    转,Jquery实现简单的翻页功能 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. pagination jquery最简单的分页【无刷新和刷新都通用】

    参数说明 参数名 描述 参数值 maxentries 总条目数                           必选参数,整数 items_per_page 每页显示的条目数            ...

  3. jquery ajax json简单的分页，模拟数据，没有封装，只显示原理

    简单的分页,模拟数据,没有封装,显示原理,大家有兴趣可以自己封装,这里只是个原理过程,真正的分页也差不多是这个原理,只是请求数据不太一样,html部分: <!TOCTYPE HTML> & ...

  4. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  5. jQuery的简单应用

     时隔多日, 终于我又有时间来浏览些新知识了, 并不是偷懒什么的, 只是真的好忙, 看似闲暇的时间总是冒出一些模糊而又不得不做的事情, 今日终于我又有时间了, 可以看下jQuery了, 并根据自己的了 ...

  6. 简单封装分页功能pageView.js

    分页是一个很简单,通用的功能.作为一个有经验的前端开发人员,有义务把代码中类似这样公共的基础性的东西抽象出来,一来是改善代码的整体质量,更重要的是为了将来做类似的功能或者类似的项目,能减少不必要的重复 ...

  7. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  8. Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页

    本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...

  9. [转]jquery设置select选中，赋值等操作

    一.基础取值问题 例如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selec ...

随机推荐

  1. IBM Java 7 新特性和在 WAS 8.5 中的配置【转载】

    IBM Java 7新特性以及在WAS V8.5 中的安装与版本切换 简介: 本文介绍了 IBM Java 7 的基本新特性以及 IBM 特有的新特性,并详细的介绍和分析了 JVM 所采用的新的垃圾回 ...

  2. Git的安装和设置

    1.客户端下载 首先可以在https://git-scm.com/downloads下载客户端,进行安装. 2.安装 安装比较简单,可以直接默认一步一步往下安装即可: 3.配置github的ssh秘钥 ...

  3. spring mvc 全局处理异常

    spring框架支持很多种全局处理异常的方式 一.Spring MVC处理异常有4种方式: (1)使用Spring-MVC提供的SimpleMappingExceptionResolver: (2)实 ...

  4. UI自动化测试框架之Selenium关键字驱动 （转）

    摘要 自动化测试框架demo,用关键字的形式将测试逻辑封装在数据文件中,测试工具解释这些关键字即可对其应用自动化 一.原理及特点 1.   关键字驱动测试是数据驱动测试的一种改进类型 2.    主要 ...

  5. 此博客可能不再更新，往后博文将发布在 GitHub 中

    在 GitHub 上, 可以建立不同的仓库,显示分类可以更明确: 有不同分支,可以打很多次草稿: 用 markdown 语法来书写比较舒服(博客园也可以设置): 最主要的是 GitHub 装逼呀!!! ...

  6. RabbitMQ 高级指南

    1 RabbitMQ 简介 1.1 介绍 RabbitMQ 是一个由 erlang 开发的基于 AMQP(Advanced Message Queue)协议的开源实现.用于在分布式系统中存储转发消息, ...

  7. webservice、WSDL简介

    Webservice是跨平台.跨语言的远程调用技术 通信机制的本质是xml数据交换 采用soap协议进行通信 而WSDL 指网络服务描述语言 (Web Services Description Lan ...

  8. 20145303刘俊谦 《Java程序设计》第4周学习总结

    20145303刘俊谦 <Java程序设计>第4周学习总结 教材学习内容总结 1.继承:继承是面向对象的第二大特征,避免多个类间重复定义共同行为.把单独抽取出来的那个类称为父类,其他的多个 ...

  9. 20145322《Java程序设计》第十周学习总结

    20145322<Java程序设计>第十周学习总结 教材学习内容总结 网络概述 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或 ...

  10. xml简单介绍及libmxml编程

    今天我们来简单介绍一下,关于xml的一些内容,包括自己编写一些程序进行生成和解析. 首先我们我们还是从xml的演化历史来了解一下它吧. 历史演化 GML: 在20世纪60年代为了促进数据交换和操作,通 ...