JQuery实现伪分页效果

首先构造一个分页页面。

页面结构如下：

<div class="main">
        <div class="item">
            <ul class="clear">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
                <li>17</li>
                <li>18</li>
                <li>19</li>
                <li>20</li>
                <li>21</li>
                <li>22</li>
                <li>23</li>
                <li>24</li>
                <li>25</li>
                <li>26</li>
                <li>27</li>
                <li>28</li>
                <li>29</li>
                <li>30</li>
            </ul>
        </div>
        <div class="page_btn clear">
            <span class="page_box">
                <a class="prev">上一页</a><span class="num"><span class="current_page">1</span><span style="padding:0 3px;">/</span><span class="total"></span></span><a class="next">下一页</a>
            </span>
        </div>
    </div>
           

构建一个页面结构。相当于导入所有的内容了。

Ps:这里的话让我有一个构造分页的想法，至少是图片分页的效果，先把所有的项目够构造起来，然后把src的值放在data-origin 当中，当需要的时候，再把origin-data放进去。可以结合jquery-lazyload实现。
           

css的样式如下：

<style>
        .main {
            width: 800px;
            zoom: 1;
            margin: 0 auto;
        }
        
        .item {
            width: 800px;
            overflow: hidden;
        }
        
        ul {
            padding: 0;
            width: 860px;
            zoom: 1;
        }
        
        .clear {
            zoom: 1;
        }
        
        .clear::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        
        ul li {
            list-style-type: none;
            float: left;
            background: #F69;
            font-size: 60px;
            text-shadow: 1px 1px 3px #555;
            width: 380px;
            height: 200px;
            margin: 10px 40px 10px 0;
            line-height: 200px;
            text-align: center;
            color: #fff;
        }
        
        .page_btn {
            padding-top: 20px;
        }
        
        .page_btn a {
            cursor: pointer;
            padding: 5px;
            border: solid 1px #ccc;
            font-size: 12px;
        }
        
        .page_box {
            float: right;
        }
        
        .num {
            padding: 0 10px;
        }
    </style>
           

这里如果只看css样式的话，则是只是设定了展示项目都展现，并且采用 向左浮动。规定了展示页面的高宽。

下面贴出所有的js代码段：

<script>
        $(document).ready(function() {
            $('ul li:gt(3)').hide(); //初始化，前面4条数据显示，其他数据隐藏    gt(3)选择4个以后的元素
            var total_q = $('ul li').length; //总数据      //也就是这里用li模拟分页显示的模块   这里只获得了第一个
            console.log(total_q);
            var current_page = 4; //每页显示的数据
            var current_num = 1; //当前页数
            var total_page = Math.ceil(total_q / current_page); //总页数   往上区
            console.log(current_num)
            var next = $('.next'); //下一页
            var prev = $('.prev'); //上一页
            $('.total').text(total_page); //显示总页数
            $('.current_page').text(current_num); //当前的页数


            //下一页
            $('.next').click(function() {
                if (current_num == total_page) {
                    return false; //如果大于总页数就禁用下一页  ,这里直接返回，不做任何处理
                } else {
                    $('.current_page').text(++current_num); //点击下一页的时候当前页数加一
                    $.each($('ul li'), function(index, item) {
                        var start = current_page * (current_num - 1); //起始范围
                        var end = current_page * current_num; //结束范围
                        if (index >= start && index < end) { //让在这区间的显示出来，并且这里的是对 所有的li dom元素都做一次
                            //如果索引值是在start和end之间的元素就显示,否则隐藏
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    });
                }
            });
            //上一页
            $('.prev').click(function() {
                if (current_num == 1) {
                    return false;
                } else {
                    $('.current_page').text(--current_num);
                    $.each($('ul li'), function(index, item) {
                        var start = current_page * (current_num - 1); //起始范围 这里直接除法就好了，第几页的开头刚好就是除法
                        // 例如： 第4页， 16， 开头是13， 但是索引开头为0， 所以是12， 所以是 3 * 4
                        var end = current_page * current_num; //结束范围
                        if (index >= start && index < end) { //这里应当是所有都做这次判断
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    });
                }
            })
        })
    </script>
           

$(document).ready(function(){})

等加载完后才运行这个 jquery 代码段。

$('ul li:gt(3)').hide();

一开始用这一句。是隐藏0·3索引外的其他dom元素。

var total_page = Math.ceil(total_q / current_page);

计算总的页数。

$('.total').text(total_page);

获取总页数并设置内容。

分页的主要逻辑还是在于前一页和后一页这个dom元素上绑定的响应事件。

Ps:$.each()是对数组，json和dom结构等的遍历
           

.each() 函数中传进去的有操作的元素数组和方法，方法固定两个参数（一个是index索引，一个是自身item）函数里，先通过外部变量currentPage计算当前的要的索引，start为起始索引，end为结束索引，在这个计算出来的索引中的，index在其中可以显示出来。不在其中隐藏起来。