对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 相关文章推荐
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
javascript中常用编程知识
Apr 08 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
js绘制购物车抛物线动画
Nov 18 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 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
咖啡与水的关系
2021/03/03 冲泡冲煮
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
浅谈PHP的反射API
2017/02/26 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
python基础教程之面向对象的一些概念
2014/08/29 Python
Python中查看文件名和文件路径
2017/03/31 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
python实现ID3决策树算法
2018/08/29 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
条幅标语大全
2014/06/20 职场文书
运动会演讲稿50字
2014/08/25 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
入党申请书怎么写?
2019/06/11 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript