通过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. 也来谈谈SQL SERVER 自定义函数~

    在使用SQL SERVER 数据库的时候,函数大家都应该用过,简单的比如 系统聚合函数 Sum(),Max() 等等.但是一些初学者编写自定义函数的时候,经常问起什么是表值函数,什么是标量值函数. 表 ...

  2. Acwing-98-分形之城(递推,数学)

    链接: https://www.acwing.com/problem/content/description/100/ 题意: 城市的规划在城市建设中是个大问题. 不幸的是,很多城市在开始建设的时候并 ...

  3. django admin登陆页出现TypeError at /admin/

    出现此错误的原因主要是,添加多条URL时urlpatterns后面的序列符号写错了,检查所有的urls.py文件将{}改为[]. error: urlpatterns = {} right: urlp ...

  4. ython CGI编程Ⅱ

    HTTP头部 hello.py文件内容中的" Content-type:text/html"即为HTTP头部的https://www.xuanhe.net/一部分,它会发送给浏览器 ...

  5. js-10s倒计时后关闭窗口

    效果: html: <h1 id="h1">10s后关闭窗口</h1> <a id="a1">启动</a> js ...

  6. 一种sql优化方案

    --select @type3Count=count(1) from TWEB_ALogisticsYD bb -- LEFT JOIN dbo.TWEB_BCompanyJJ as B3 WITH( ...

  7. Linux不同机器文件挂载

    由于此前发布项目应用时,需要对两台文件服务器进行文件挂载,所以才实际第一次接触到这个名词,但由于一直以来自己没有真正的去操作过,只是停留在一些理论层次,所以今天记录一下这个实现过程,以备后用. 使用设 ...

  8. Python初记

    ------Python是一个优雅的大姐姐 我是通过<老男孩Python>学习Python,根据我手上的资源学习Python,资料不齐,但是这个是最好的,边学习边寻找有没有相同的类型. 在 ...

  9. TTTTTTTTTTTTT 树的直径 Codeforces Beta Round #14 (Div. 2) D. Two Paths

    tiyi:给你n个节点和n-1条边(无环),求在这个图中找到 两条路径,两路径不相交,求能找的两条路径的长度的乘积最大值: #include <iostream> #include < ...

  10. 2-SAT (two-statisfiability) 算法 学习笔记

    $2-SAT$问题指的是对于若干限制求出一组可行解的问题. 考虑对于$n$个值域为${0,1}$的变量$x_1 , x_2 ,...,x_n$ 满足若干限制: 若 $x_i = p$ 则 $x_j = ...