功能描述：

（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. mysql 锁相关的视图（未整理）

    mysql 锁相关的视图 查看事务,以及事务对应的线程ID   如果发生堵塞.死锁等可以执行kill  线程ID  杀死线程      kill  199 SELECT * FROM informat ...

  2. python字符串的操作（去掉空格strip()，切片，查找，连接join()，分割split()，转换首字母大写， 转换字母大小写...）

    #可变变量:list, 字典#不可变变量:元祖,字符串字符串的操作(去掉空格, 切片, 查找, 连接, 分割, 转换首字母大写, 转换字母大小写, 判断是否是数字字母, 成员运算符(in / not ...

  3. Zookeeper那些事

    一. 什么是Zookeeper Zookeeper 是 Google 的 Chubby一个开源的实现,是 Hadoop 的分布式协调服务 它包含一个简单的原语集,分布式应用程序可以基于它实现同步服务, ...

  4. netbeans许可证模板设置

    工具->模板->设置 user=your name 工具->模板->许可证->默认许可证 <#if licenseFirst??>${licenseFirst ...

  5. 用nodejs搭建代理服务器

    题图 From 极客时间 From Clm 前端开发者在工作中常常遇到跨域的问题,一般我们遇到跨域问题主要使用以下办法来解决: 1.jsonp 2.cors 3.配置代理服务器. jsonp不是很灵活 ...

  6. jquery试题

    1.下面哪种说法是正确的? 您的回答:jQuery 是 JavaScript 库 2.jQuery 使用 CSS 选择器来选取元素? 您的回答:正确 3.jQuery 的简写是? 您的回答:$ 符号 ...

  7. ES6、7、8常用新特性总结(超实用)

    ES6常用新特性 1. let && const let 命令也用于变量声明,但是作用域为局部 { let a = 10; var b = 1; } 在函数外部可以获取到b,获取不到a ...

  8. Calling Convention的总结

    因为经常需要和不同的Calling Convention打交道,前段时间整理了一下它们之间的区别,如下: 清理堆栈 参数压栈顺序 命名规则 (MSVC++) 备注 Cdecl 调用者 (Caller) ...

  9. Oracle查询一个表的数据插入到另一个表

    1. 新增一个表,通过另一个表的结构和数据 create table XTHAME.tab1 as select * from DSKNOW.COMBDVERSION 2. 如果表存在: insert ...

  10. shell内置命令eval的具有什么作用

    答:把变量中的内容当成命令来执行