功能描述：

（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. centos7编译安装Python3.6（与2.7并存）

    首先去官网下载python3.6 https://www.python.org/ 环境准备:#yum install openssl-devel bzip2-devel expat-devel gdb ...

  2. Godaddy域名因为whois信息虚假被暂时关闭

    如果你收到来自 Godadddy 通过 invalidwhois@godaddy.com 发出的标题为如下内容的邮件: [Incident ID: xxxx] xxxx - DS Invalid Wh ...

  3. Java基础知识陷阱(二)

    本文发表于本人博客. 上次说了一些关于字符串的知识,都是比较基础的,那这次也说下关于对象地址问题,比如传参.先看下面代码: public void changeInt(int a){ a = ; } ...

  4. PKU 3020 Antenna Placement(拆点+最小边覆盖)(最大匹配)

    题目大意:原题链接 一个矩形中,有N个城市’*’,现在这n个城市都要覆盖无线,若放置一个基站,那么它至多可以覆盖相邻的两个城市.问至少放置多少个基站才能使得所有的城市都覆盖无线? 提示:看清楚题目,' ...

  5. sidekiq-cron定时任务

    参考  时间格式 gem "sidekiq-cron", "~> 1.1" route.rb下添加 require 'sidekiq/cron/web', ...

  6. JavaScript-dom1

    获取事件源 var div = document.getElementById("box"); // var arr1 = document.getElementsByTagNam ...

  7. 简单说说spring的事务机制，以及是如何管理的？

    事务管理可以帮助我们保证数据的一致性,对应企业的实际应用很重要. Spring的事务机制包括声明式事务和编程式事务. 编程式事务管理:Spring推荐使用TransactionTemplate,实际开 ...

  8. java中静态变量，静态代码块，静态方法，实例变量，匿名代码块等的加载顺序

    转自:http://blog.csdn.net/mrzhoug/article/details/51581994 一.在Java中,使用”{}”括起来的代码称为代码块,代码块可以分为以下四种: 1.普 ...

  9. [原创]CSS 去掉点li 的点 使得LI前面的点不在显示

    我对博客的认识是:记录问题,解决问题,分享知识.如果有轮子,我不需要造轮子. 1.问题解决方式: 设置属性:li {list-style-type:none;} 2.更多属性参数参考 list-sty ...

  10. Linux下的Nginx安装

    1 nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没有g ...