对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 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
在vue中使用Base64转码的案例
Aug 07 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
Apache2 httpd.conf 中文版
2006/11/17 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
Python压缩和解压缩zip文件
2015/02/14 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
keras中的backend.clip用法
2020/05/22 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
详解python 内存优化
2020/08/17 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
软件测试英文面试题
2012/10/14 面试题
超市开业庆典策划方案
2014/05/14 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
劳模先进事迹材料
2014/12/24 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
个人简历求职信范文
2015/03/20 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android