基于jquery的静态页面翻页

  最近需要用到一个静态分页(以前是php直接放过来的没有研究过),也没很多技术含量,就是方便以后用下~

  没有封装成插件,里面代码很直白,样式,js改起来很方便。

  作用对象: 当后台提供数据需要前台展示分页(适合分页数量比较小的项目)的时候

  代码说明(源码有详细说明):

var dataL = data.length;//记录data总长度
            var perPage = 3//每一页存在三条数据
            var nowIndex = 1;//记录点击的 翻页的index 为了左右按钮用
            function LR(maxVal,reducesOrPlus){
                    if(nowIndex == maxVal){
                        return false;
                    }else{
                        nowIndex = nowIndex+reducesOrPlus;
                    }//判断是否达到临界,到左右按钮那了            
                    $('span').eq(nowIndex).addClass('on').siblings().removeClass();
                    $('ul','.list').eq(nowIndex-1).show().siblings('ul').hide();
                }//LR 左右按钮点击事件
初始变量和事件

  中心思想:根据 数据 总数量,来确定需要几个包装容器对齐包装,有几个包装容器(代码中为ul),自然要几个对应的翻页元素(代码中为span),建立好包装容器之后,可以往里面循环添加想添加的 数据个数 

  js小tip:① !!expression 会返回一个boolean值,省的去var oBooleanObject = new Boolean(exp); 

       ② 多余代码能重复用就用一个函数里面去通过改变不同的参数去调用(本例中的向前一页和向后一页的点击事件) 

$('.prev').click(function(){LR(1,-1)});
$('.next').click(function(){LR($('span').last().index()-1,+1)});
pre,next点击事件

下载地址

      

原文地址:https://www.cnblogs.com/boyice/p/4686004.html