功能描述：

（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. 我的第一次NGS分析操作

    部分参考自:生物信息学100个基础问题 —— 番外2: 用Anaconda快速搭建生物信息学分析平台 - 孟浩巍的文章 - 知乎 https://zhuanlan.zhihu.com/p/357114 ...

  2. python爬虫中文乱码解决方法

    python爬虫中文乱码 前几天用python来爬取全国行政区划编码的时候,遇到了中文乱码的问题,折腾了一会儿,才解决.现特记录一下,方便以后查看. 我是用python的requests和bs4库来实 ...

  3. CTreeView 的教程

    整个网上搜了一圈没有好的CTreeView 的教程,所以自己谢谢看. CTreeView 是什么? C打头的东西当然是一个类了. 有类就有继承,他的继承关系如下. 有个东西和他比较像 叫CTreeCt ...

  4. Mock Server 之 moco-runner 使用指南二

    文章出处http://blog.csdn.net/crisschan/article/details/53335234 moco-runner 安装配置 1. 下载jar https://repo1. ...

  5. Zen-cart产品页面随机调用Wordpress文章

    <?php require('./wordpress所在目录/wp-blog-header.php'); ?><?php$rand_posts = get_posts('number ...

  6. SQL Server 创建游标（cursor）

    游标的定义: 游标则是处理结果集的一种机制,它可以定位到结果集中的某一行,也可以移动游标定位到你所需要的行中进行操作数据.与 select 语句的不同是,select 语句面向的是结果集,游标面向的是 ...

  7. Git在Githib和Github上的使用

    本文使用的环境是linux里 一.git的常用命令解释: 1.基础命令: git init #创建版本库 git add <file> #将文件修改添加到暂存区 git commit -m ...

  8. 原生js 操作dom

    1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...

  9. Qt 编码问题QTextCodec

    在学习计算机语言的时候, 关于字体编码问题, 一直是大家开始学习新语言比较头痛的问题, 在这边总结一下关于Qt图形框架开发的编码问题. 一般在Window开发环境里,是GBK编码,在Linux开发环境 ...

  10. C++文件路径的写法

    转自:http://blog.csdn.net/chengonghao/article/details/51057780 文件路径的表示可以分为绝对路径和相对路径: c++中\\是一种转义字符,他表示 ...