博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用jquery对数组进行分页,或者是对ul li中的数据进行隐藏显示
阅读量:4981 次
发布时间:2019-06-12

本文共 2195 字,大约阅读时间需要 7 分钟。

 

这两天在做项目的时候用到了对数组进行分页,在网上搜索了一篇博客,是对ul li 中的视频进行分页显示。减少了每次从数据库中读取数据的麻烦

下面先将以下将数组进行分页,

1.首先将说有的数组放在ul li 标签中

$(document).ready(function(){    var data=$("#annex").val();    var datas=data.split(",");    var annex='';    var annexSub='';    var annexName='';        for(var i=0;i
" + annexName + ""; $("#ul_model").append(msg); }})
ul id="ul_model">

 上面已经将所有的数组分别插入到页面中,然后对其进行分页显示

  此为我看到的博客,如果对下面的讲述不能理解。请看原文

$("#ul_model ul li:gt(3)").hide();     //初始化,前面4条数据显示,其他数据隐藏    var data=$("#annex").val();    var datas=data.split(",");     var  total= datas.length;   //总数据   //  var total =$("#ul_model li").index()+1;   另一种计算ul 中li的总数的办法     var current_page=4;   //每页显示的数据    var current_num=1;    //当前页数    var total_page= Math.round(total/current_page);//总页数      var next=$(".next");//下一页     var prev=$(".prev");//上一页     $(".total").text(total_page);//显示总页数     $(".current_page").text(current_num);//当前的页数     //下一页    $(.next).click(function(){        if(current_num==7){            return false;    //如果大于总的页数,就禁用下一页        }else{            $(".current_page").text(++current_num);    //点击下一页时,当前页数加1            $.each($('#ul_model  li'),function(index,item){                var start=current_page*(current_num-1);   //其实范围                var end=current_page*current_num;                if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示,否则就隐                     $(this).show();                 }else {                     $(this).hide();                  }             });        } });    //上一页    $(".prev").click(function(){        if(current_num==1){            return false;        }else{            $(".current_page").text(--current_num);            $.each($('#ul_model  li'),function(index,item){                var start=current_page*(current_num-1);   //其实范围                var end=current_page*current_num;                if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示,否则就隐                     $(this).show();                 }else {                     $(this).hide();                  }             });        }    })

 

 以上是我是先的全部代码。上面的功能主要就是通过隐藏也控制页面的现实。

转载于:https://www.cnblogs.com/bingrong/p/3323730.html

你可能感兴趣的文章
关于MySql数据库设计表与查询耗时分析
查看>>
动画参数
查看>>
一道(古老的)英文题
查看>>
定义一些常亮
查看>>
怎么准确的判断当前页面是否有虚拟导航栏
查看>>
客户端(浏览器端)数据存储技术概览
查看>>
redis发布(pub)、订阅(sub)模式
查看>>
Python数据分析-知识宝藏
查看>>
安装libwxsmithlib-dev时提示“正试图覆盖...”的错误
查看>>
logback日志丢失的情况之一
查看>>
Style Transfer for Headshot Portraits
查看>>
[Windows Phone 7璀璨]北漂1.0在线歌词播放器一.项目搭建及版权声明
查看>>
ios 添加多个target 管理 多个版本文件
查看>>
二阶段之四
查看>>
masonry框架的使用之-多个视图的均匀等间距分布
查看>>
平面最近点对(分治)
查看>>
如何将centos7自带的firewall防火墙更换为iptables防火墙
查看>>
Intent 的两种主要使用方法
查看>>
5239-回忆京都-洛谷3月赛gg祭
查看>>
c# API接受图片文件以Base64格式上传图片
查看>>