欢迎光临一流素材网,免积分免费素材下载!
AD
当前位置:首页 > JS代码 > 其它代码

一款漂亮方便调用的jQuery前端分页

所属栏目:其它代码更新时间:2019-12-12原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明


导入资源:

<script type="text/javascript" src="js/jquery.js"></script>

javascript代码:

<script type="text/javascript"> 
$(document).ready(function(){
          //每页显示的数目     
          var show_per_page = 5;      
          //获取content对象里面,数据的数量     
          var number_of_items = $('#content').children().size();     
          //计算页面显示的数量     
          var number_of_pages = Math.ceil(number_of_items/show_per_page);          
          //隐藏域默认值     
          $('#current_page').val(0);     
          $('#show_per_page').val(show_per_page);          
          var navigation_html = '<a href="javascript:previous();">上一页</a>';     
          var current_link = 0;     
          while(number_of_pages > current_link){
                   navigation_html += '<a href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
                   current_link++;     
                   }     
                   navigation_html += '<a href="javascript:next();">下一页</a>';          
                   $('#page_navigation').html(navigation_html);          
                   //add active_page class to the first page link     
                   $('#page_navigation .page_link:first').addClass('active_page');         
                    //隐藏该对象下面的所有子元素     
                    $('#content').children().css('display', 'none');          
                    //显示第n(show_per_page)元素     
                    $('#content').children().slice(0, show_per_page).css('display', 'block');      
                    }); 
                    //上一页 function previous(){     
                    new_page = parseInt($('#current_page').val()) - 1;     
                    //if there is an item before the current active link run the function     
                    if($('.active_page').prev('.page_link').length==true){         
                    go_to_page(new_page);     
                    }      
                    } 
                    //下一页 function next(){     
                    new_page = parseInt($('#current_page').val()) + 1;     
                    //if there is an item after the current active link run the function     
                    if($('.active_page').next('.page_link').length==true){         
                    go_to_page(new_page);    
                    }      
                    } 
                    //跳转某一页 function go_to_page(page_num){     
                    //get the number of items shown per page     
                    var show_per_page = parseInt($('#show_per_page').val());          
                    //get the element number where to start the slice from     
                    start_from = page_num * show_per_page;          
                    //get the element number where to end the slice     
                    end_on = start_from + show_per_page;          
                    //hide all children elements of content div, get specific items and show them     
                    $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');          
                    /*get the page link that has longdesc attribute of the current page and add active_page class to it   and remove that class from previously active page link*/     
                    $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');          
                    //update the current page input field     
                    $('#current_page').val(page_num); }    
                    </script>

CSS样式:

<style> 
#page_navigation a{
     padding:3px;     
     border:1px solid gray;     
     margin:2px;     
     color:black;     
     text-decoration:none 
     } 
     .active_page{
          background:darkblue;     
          color:white !important; 
          } 
          </style>






具体效果请看演示,一流资源网推荐下载。

标签:
代码下载(0)
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1JS动态五星评分插件代码

2淘宝商品jQuery列表多条件查询特效代码

3兼容所有浏览器的设为首页收藏本站js代码

4JS实现文字替换成图片或者其它内容

5js实现网页多个div定时轮流显示的代码

6IE6旧版浏览器提示升级代码模板下载

7SimplePager-非常简洁优秀的 jQuery 分页插件-同页面可重复使用

8后台登录jquery网页全屏背景图片自动切换代码

9百度404页面JS倒计时返回页面代码

10jQuery公司大事记、历程时间轴专用代码

最新更新的

1JqueryPagination分页插件

2一款漂亮方便调用的jQuery前端分页

3JS返回上一页/返回上一页并刷新

4百度404页面JS倒计时返回页面代码

5JS赋值给指定元素的父级元素

6JS实现301跳转的JS代码

7JS拆分文本再组合

8Jquery点击按钮给class设置样式的JS代码

9JS判断DIV内数值大小输出不同内容

10兼容所有浏览器的设为首页收藏本站js代码

领航时时彩软件 美国股市行情 金来源配资 15选5走势图20 重庆百变王牌高手技巧 浙江快乐十二技巧 广西快乐双彩今晚中奖结果 尚牛配资 昨晚35选7开奖结果辽宁 青海11选5今日开奖 11选5开奖结果浙 炒股吧 一分赛车怎么看走势图 投资理财平台-选择中欧钱滚滚 东方6+1一等奖多少钱 重庆快乐十分钟走势图 十分赛车平台-线上平台