假分页

发表于

由于项目中需求用到假分页，而且还不是ajax请求数据的那种，是后端直接一次性循环到页面上，需求以6个为一页进行分组

后端一次性循环输出代码

1
2
3
4
5
6
7
8
9
10
11
<?php if($response['course_list']):?>
    <?php foreach($response['course_list'] as $val):?>
    <li>
        <div class="last-study-box">
            <?php if($val['last_study_time']):?>
            <i></i>上次学习时间：<?php echo $val['last_study_time'];?>
            <?php endif;?>
        </div>
    </li>
    <?php endforeach;?>
<?php endif;?>

思路：把所有后端循环输出的li 获取出来。并以每6个li为一组元素存放到一个数组中，再根据该数组的长度个数，判断需要新增多少ul容器，以便之后做分页，然后获取所有的ul容器，将数组匹配添加到相对应的ul中
将所有ul容器的数量长度得到并创建分页页码元素并插入到分页元素标签中

如果一个页面上有两个假分页，可封装成为函数并多次调用

完整代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- 结构 -->
<div class="mem-tab-cons mytab-cons">
    <div class="mem-tab-con mytab-con current" id="myClass">
        <ul class="clearfix class-list">
            <?php if($response['course_list']):?>
                <?php foreach($response['course_list'] as $val):?>
                <li>
                    <div class="last-study-box">
                        <?php if($val['last_study_time']):?>
                        <i></i>上次学习时间：<?php echo $val['last_study_time'];?>
                        <?php endif;?>
                    </div>
                </li>
                <?php endforeach;?>
            <?php endif;?>
        </ul>                            
        <!-- 页码 -->
        <div class="page">
            <ul class="clearfix">
                <!-- <span><a href="javascript:;">&lt;</a></span>
                <li class="currentPage"><a href="javascript:;">1</a></li>
                <li><a href="javascript:;">2</a></li>
                <li><a href="javascript:;">3</a></li>
                <li><a href="javascript:;">4</a></li>
                <li><a href="javascript:;">5</a></li>
                <span><a href="javascript:;">&gt;</a></span> -->
            </ul>
        </div>
    </div>
    <div class="mem-tab-con mytab-con" id="myOpenClass">
        ...
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
//假分页
function tabfun(tabid){
    var tabids = document.getElementById(tabid);
    var $tabid = $(tabids)
	
	//把所有后端循环输出的li 获取出来。并以每6个li为一组元素存放到一个数组中
    var lis = "";
    var result = new Array();
    var data = $tabid.find(".class-list li");
    for(var i=0;i<data.length;i+=6){
       result.push(data.slice(i,i+6));
    }
    //再根据该数组的长度个数，判断需要新增多少ul容器
    if(data.length/6>1){
        for(var i =1;i<data.length/6;i++){
            var new_obj = $("<ul class='class-list clearfix hide'></ul>");
            $tabid.find(".class-list").first().after(new_obj);
        }
    }
    
    //将数组匹配添加到相对应的ul中
    var dataUl = $tabid.find(".class-list");
    dataUl.each(function(index){
        $(this).append(function(){
            return result[index];
        })
    })
	//将所有ul容器的数量长度得到并创建分页页码元素并插入到分页元素标签中
    var btnNum =  $tabid.find(".class-list").length;
    for(var i = 1;i<=btnNum;i++){
        lis += "<li><a href='javascript:;'>"+i+"</a></li>";
    }
    $tabid.find(".page ul").append(lis);
    var btnLeft = "<span class='left-prev'><a href='javascript:;'>&lt;</a></span>";
    var btnRight = "<span class='right-next'><a href='javascript:;'>&gt;</a></span>";
    $tabid.find(".page ul li").first().before(btnLeft);
    $tabid.find(".page ul li").last().after(btnRight);
    
    $tabid.find(".page li").first().addClass("currentPage");
    $tabid.find(".page li").click(function(){
        $(this).addClass("currentPage").siblings().removeClass("currentPage");
        var index = $(this).index()-1;
        console.log(index)
        $tabid.find(".class-list").eq(index).removeClass("hide").siblings(".class-list").addClass("hide");
    })
    var i =0;
    $tabid.find(".right-next").click(function(){
        i++;
        if(i==btnNum){
            i=btnNum-1;
        }
        $tabid.find(".page li").eq(i).addClass("currentPage").siblings().removeClass("currentPage");
        $tabid.find(".class-list").eq(i).removeClass("hide").siblings(".class-list").addClass("hide");
    })
    $tabid.find(".left-prev").click(function(){
        i--;
        if(i==-1){
            i=0;
        }
        $tabid.find(".page li").eq(i).addClass("currentPage").siblings().removeClass("currentPage");
        $tabid.find(".class-list").eq(i).removeClass("hide").siblings(".class-list").addClass("hide");
    })
}
tabfun("myClass");
tabfun("myOpenClass");