对table和ul实现js分页示例分享


Posted in Javascript onFebruary 24, 2014
(function($) {
 $.fn.tablepage = function(oObj, dCountOfPage, fresh_id) {
  var dPageIndex = 1;
  var dNowIndex = 1;
  var sPageStr = "";
  var dCount = 0;
  var oSource = $(this);
  var sNoSelColor = "#CCCCCC";
  var sSelColor = "black";
  var sFontColor = "white";
  var nowIndex = 1;
  change_page_content();
  function change_page_content() {
   // 取得?料???BR>   dCount = oSource.children().children().length;
   // ?示??
   sPageStr = "<div class='ref'><a href='javascript:void(0)'  id='fresh_"
     + fresh_id
     + "' onClick='fresh(this.id);' class='sx' style='color:#247AA9;'><span>刷新</span></a></div>";
   sPageStr += "  <div class='msdn'><a href='javascript:void(0)'>首页</a><a href='javascript:void(0)'>上一页</a><a href='javascript:void(0)'>下一页</a><a href='javascript:void(0)'>尾页</a></div>";
   sPageStr += "<div class='txt'>"+"共"+Math.ceil(dCount / dCountOfPage)+"页,当前第"+"<strong>"+dNowIndex+"</strong>"+"页"+"</div>";  
   oObj.html(sPageStr);
   dPageIndex = 1;
   // ??V表格?热?BR>   var rr=oSource.children().children("tr");
   oSource.children().children("tr").each(function() {
    // ==2
    if (dPageIndex >= (((dNowIndex - 1) * dCountOfPage) + 1)
      && dPageIndex <= ((dNowIndex * dCountOfPage) )) {
     $(this).show();
    } else {
     $(this).hide();
    }
    dPageIndex++;
   });
  // oSource.children().children("tr").first().show(); // head一定要?示
   if(dCount<=dCountOfPage){
    var tt=$("#table_page_"+fresh_id).children('.msdn').children().each(function(i) {
     if(i==2||i==3||i==0||i==1){
      $(this).addClass("disabled");
     }
    });
   }
   else if(dNowIndex==Math.ceil(dCount / dCountOfPage)){
    var tt=$("#table_page_"+fresh_id).children('.msdn').children().each(function(i) {
     if(i==2||i==3){
      $(this).addClass("disabled");
     }
    });
   }else if(dNowIndex==1){
    var tt=$("#table_page_"+fresh_id).children('.msdn').children().each(function(i) {
     if(i==0||i==1){
      $(this).addClass("disabled");
     }
    });
   }
   // 加入?Q?事件
   oObj.children().children().each(function() {
    $(this).click(function() {
       dNowIndex = $(this)[0].innerHTML;
       if (dNowIndex == '首页') {
        dNowIndex = 1;
        change_page_content();
        nowIndex = dNowIndex;
       }
       if (dNowIndex == '尾页') {
        dNowIndex = Math.ceil(dCount / dCountOfPage);
        change_page_content();
        nowIndex = dNowIndex;
       }
       if (dNowIndex == '下一页') {
        if (nowIndex < Math.ceil(dCount / dCountOfPage)) {
         dNowIndex = parseInt(nowIndex) + 1;
         change_page_content();
         nowIndex = nowIndex + 1;
        }
       }
       if (dNowIndex == '上一页') {
        if (nowIndex > 1) {
         dNowIndex = parseInt(nowIndex) - 1;
         change_page_content();
         nowIndex = nowIndex - 1;
        }
       }
      });
   });
  }
 };
})(jQuery);
<script type="text/javascript">
$(document).ready( function() {
 var totalPage=$("ul li").length;
 var total = Math.ceil($("ul li").length / 5);
 var current = 1;
 //var index =4;
 if(totalPage>5){
  $("ul li:gt(4)").hide();
  $("#btnPrev").attr("class", "tabs-scroller-left-disabled").attr("disabled", "disabled").click( function() {
   debugger;
   $("#btnNext").attr("class", "tabs-scroller-right");
   $("#btnNext").removeAttr("disabled");
   current -= 1;
   var tt=current;
   $("ul li").show();
   var indexStart = (current - 1);
   var indexEnd = indexStart + 4;
   $("li:lt(" + indexStart + "), li:gt(" + indexEnd + ")", $("ul")).hide();
   if (current == 1){
    $(this).attr("class", "tabs-scroller-left-disabled");
    $(this).attr("disabled", "disabled");
   }
  });
  $("#btnNext").click( function() {
   debugger;
   $("#btnPrev").attr("class", "tabs-scroller-left");
   $("#btnPrev").removeAttr("disabled");
   current += 1;
   $("ul li").show();
   var indexStart = (current - 1);
   var indexEnd = current + 4  > $("ul li").length - 1 ? $("ul li").length - 1 : current +3;
   $("li:lt(" + indexStart + "), li:gt(" + indexEnd +")", $("ul")).hide();
   if (current+4 >= totalPage){
    $(this).attr("class", "tabs-scroller-right-disabled");
    $(this).attr("disabled", "disabled");
   }  });
 }else{
  alert(1);
  $("#btnPrev").attr("class", "tabs-scroller-left-disabled");
  $("#btnNext").attr("class", "tabs-scroller-right-disabled");
 }
});
</script>
Javascript 相关文章推荐
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
jquery.post用法之type设置问题
Feb 24 #Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 #Javascript
js获得页面的高度和宽度的方法
Feb 23 #Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 #Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 #Javascript
js 金额格式化来回转换示例
Feb 23 #Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 #Javascript
You might like
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
超级简单的php+mysql留言本源码
2009/11/11 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
利用php生成验证码
2017/02/23 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
Python实现代码统计工具(终极篇)
2016/07/04 Python
Python如何发布程序的详细教程
2018/10/09 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
python 实现波浪滤镜特效
2020/12/02 Python
python反扒机制的5种解决方法
2021/02/06 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
会计与出纳自荐书范文
2014/03/16 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
各种货币符号快捷输入
2022/02/17 杂记