通过jq实现分页的原理如下：将所有条数加载到页面中，根据每页放特定条数（例如 5 条）获取jquery对象索引，使部分条数显示，其他条数隐藏。

前提：引入jquery.js

代码

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .wrapper{

            width: 800px;

            margin: 50px auto;

        }

        /*清除浮动*/

        .wrapper::after{

            content: "";

            display: block;

            clear: both;

        }

        ul li{

            width: 100%;

            height: 30px;

            text-align: center;

            line-height: 30px;

            float: left;

            background: #ccc;

            margin: 10px 0px;

        }

        a{

            cursor: pointer;

            border:1px solid black;

        }

        .btn{

            float: right;

        }

    </style>

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

    <script type="text/javascript">

        $(document).ready(function(){

            /*添加100条数据（模仿后台传入）*/

            for(var i = 1; i<101;i++){

                $("#content").append("<li>"+i+"</li>");

            }

            /*设置每页显示的条数*/

            $every_page = 5;

            $items = $("ul li");

            $total_all = $items.length;//总条数

            $page_num = Math.round($total_all/$every_page)//向上取整（2.5 ==> 3）

            $("#total_page").text($page_num);

            //初始化页面，只显示前5条。

            $("ul li:gt("+($every_page-1)+")").each(function(){

                $(this).hide();

            })

            //点击下一条按钮函数。

            $("#next_page").click(function(){

                $current_page = ($("#current_page").text());//获取当前页码

                if($current_page <$page_num){

                    $("#current_page").text(++$current_page);

                    $.each($("ul li"),function(index,item){

                        //获取下一页显示的开始索引。

                        var start = ($("#current_page").text()-1)*$every_page;

                        if(index>=start&& index<start+$every_page){

                            $(this).show();

                        }else{

                            $(this).hide();

                        }

                    })

                }else{

                    return false;

                }

            })

            $("#pre_page").click(function(){

                $current_page = ($("#current_page").text());

                if($current_page > 1){

                    $("#current_page").text(--$current_page);

                    $.each($("ul li"),function(index,item){

                        var start = ($("#current_page").text()-1)*$every_page;

                        if(index>=start&& index<start+$every_page){

                            $(this).show();

                        }else{

                            $(this).hide();

                        }

                    })

                }else{

                    return false;

                }

            })

        })

    </script>

</head>

<body>

    <div class="wrapper">

        <div class="items">

            <ul id= "content">

            </ul>

        </div>

        <span class="btn">

            <a id = "pre_page">上一页</a>

            <span>

                <span id = "current_page">1</span>

                <span>/</span>

                <span id = "total_page"></span>

            </span>

            <a id = "next_page">下一页</a>

        </span>

    </div>

</body>

</html>

运行结果

jquery实现分页效果的更多相关文章

  1. 使用Jquery做分页效果

    之前写过一个PHP 的分页效果,但是今天小伙伴和我说了一个不适用后台单纯用前段的JS来写分页,整理了一下,代码如下: html: <div id="containet"> ...

  2. jQuery伪分页效果

    如图,我们首先分析在一个页面存放4条内容,其余的超出隐藏(因为这里没有后台数据,所以我们把内容‘写死’),然后就是下面两个按钮(这里我们不用button,因为button有自带的提交功能),然后我们可 ...

  3. SpringMVC -jquery实现分页

    效果图: 关键类的代码: package:utils: SpringUtil.java 通过jdbcTemplate连接oracle数据库 package com.utils; import org. ...

  4. jquery动态分页

    最近一直研究jquery的分页效果,刚刚弄好了一个,拿出来与大家分享.分页效果与时光网的差不多. 网址:http://www.mtime.com/movie/news/all/ 先在aspx页面放置一 ...

  5. JS实现分页效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...

  7. 5种风格的 jQuery 分页效果【附代码】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  8. 基于jquery 的分页插件，前端实现假分页效果

    上次分享了一款jquery插件,现在依旧分享这个插件,不过上一次分享主要是用于regular框件,且每一页数据都是从后端获取过来的,这一次的分享主要是讲一次性获取完数据 然后手动进行分页.此需求基本上 ...

  9. 使用jQuery Pagination Plugin实现分页效果

    最近使用分页这个基础效果较为频繁,而项目前端页面使用的是纯静态的HTML,自己之前写的JSP中的分页就用不成了:项目中也引入了Bootstrap,本来想使用Bootstrap中的分页样式,但发现其样式 ...

随机推荐

  1. springboot jpa junit测试遇到的问题

    jpa在插入数据的时候,插入的对象变量user中不能包含变量,需要时确切的值,否则会出现sql解析报错 解析报错如下图

  2. ab测试nginx Nginx性能优化

    转自:https://www.cnblogs.com/nulige/p/9369700.html 1.性能优化概述 在做性能优化前, 我们需要对如下进行考虑 1.当前系统结构瓶颈 观察指标 压力测试 ...

  3. python之ORM

    pymysql python操作数据库的基本步骤: 导入相应的python模块: 使用connect函数连接数据库,并返回一个connection对象: 通过connection对象的cursor方法 ...

  4. 一分钟 解决Tomcat端口 占用问题

    打开 cmd命令 在 命令界面中输入 netstat -ano|findstr 8080 使用 命令 taskill /pid 端口号  /f    结束占用

  5. SparkStreaming HA高可用性

    1.UpdateStateByKey.windows等有状态的操作时,自动进行checkpoint,必须设置checkpoint目录,数据保留一份在容错的文件系统中,一旦内存中的数据丢失,可以从文件系 ...

  6. js-点击+加关注变成已关注，已关注状态时，鼠标滑动上的状态时取消关注

    效果: HTML: <div class="rightBtn cur">+关注</div> CSS: .rightBtn{ width: 80px; hei ...

  7. Windows Server 快速生成免费SSL证书 (letsencrypt)

    最近官网需求部署个SSL证书,一番操作后把借鉴的网站与实际过程记录下来 Let's Encrypt,官网是https://letsencrypt.org/,它是一个由各大公司赞助的公益组织: 有趋势有 ...

  8. 【WC2016】论战捆竹竿

    已经快三周了啊--终于把挖的坑填了-- 首先显然是把除了自身的所有border拿出来,即做 \(\left\{ n - b_1, n - b_2, \dots, n - b_k, n \right\} ...

  9. 兼容pc端和移动端的轮播图插件 swiper.js

    swiper.js是一款纯JavaScript打造的滑动特效插件,可以用来实现检点轮播图,tab触摸滑动切换等常用效果.下载地址:https://www.swiper.com.cn/download/ ...

  10. [CSP-S模拟测试]:真相（模拟）

    题目传送门(内部题106) 输入格式 第一行为一个正整数$T$,表示数据组数. 接下来$T$组数据,每组数据第一行一个正整数$n$表示$OIer$,接下来$n$行,第$i$行表示编号为$i$的人所说的 ...