对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 相关文章推荐
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
webpack4简单入门实例
Sep 06 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
url decode problem 解决方法
2011/12/26 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
详解微信UnionID作用
2019/05/15 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python基于multiprocessing的多进程创建方法
2015/06/04 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
Django之form组件自动校验数据实现
2020/01/14 Python
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
空指针到底是什么
2012/08/07 面试题
《秋姑娘的信》教学反思
2014/02/28 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
司机岗位职责说明书
2014/07/29 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
2016年安全月活动总结
2016/04/06 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技
MySQL自定义函数及触发器
2022/08/05 MySQL