功能描述：

（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. 使用tensorflow 构建rnn网络

    使用tensorflow实现了简单的rnn网络用来学习加法运算. tensorflow 版本:1.1 import tensorflow as tf from tensorflow.contrib i ...

  2. Java将数据写进excel

    Java将数据写进excel Java将数据写进excel class User { private String name ; private String password; public Use ...

  3. HTML5游戏开发系列教程4(译)

    原文地址:http://www.script-tutorials.com/html5-game-development-lesson-4/ 这篇文章是我们继续使用canvas来进行HTML5游戏开发系 ...

  4. Python（socket编程——2）

    import socket ''' socket.socket(socket_family,socket_type,protocal=0) socket_family 可以是 AF_UNIX 或 AF ...

  5. python全栈开发从入门到放弃之函数进阶

    1.三元运算 a= 1 b=2 max = (a if a>b else b ) #条件成立的结果 if 条件 else 条件不成立的结果 print(max) 2.先上一首python之禅 i ...

  6. Linux系统——特殊符号、通配符及正则表达式

    特殊符号 | 管道符号,将管道符左边的命令的执行结果以字符串的形式通过 管道符传送到管道符右边命令末尾,作为管道符右边命令的执行 范围 > 输出重定向 >> 追加输出重定向 < ...

  7. fake-useragent，python爬虫伪装请求头

    在编写爬虫进行网页数据的时候,大多数情况下,需要在请求是增加请求头,下面介绍一个python下非常好用的伪装请求头的库:fake-useragent,具体使用说明如下: 1.在scrapy中的使用 第 ...

  8. kubenetes 应用更新

    一.Deployment类型: 1.更新: 1).命令方式更新镜像: kubectl set image deployment nginx-deployment nginx=nginx:1.9.1 k ...

  9. 哪个地图API 好用

    之前我们能用的地图软件还寥寥无几,而且一个地图包动辄就上百M,还不支持GPS,没有实时路况,没有卫星图,一年也未必更新一次.现如今的地图功能已经极大丰富了,开发者的项目选择性也很大,地图哪个受众比较多 ...

  10. ACM-ICPC 2018 焦作赛区网络预赛 E. Jiu Yuan Wants to Eat (树链剖分-线性变换线段树)

    树链剖分若不会的话可自行学习一下. 前两种操作是线性变换,模\(2^{64}\)可将线段树全部用unsigned long long 保存,另其自然溢出. 而取反操作比较不能直接处理,因为其模\(2^ ...