纯JavaScript实现的分页插件实例


Posted in Javascript onJuly 14, 2015

本文实例讲述了纯JavaScript实现的分页插件。分享给大家供大家参考。具体如下:

//总条数(必填)
var Num=Number(<?php echo $count;?>)
//当前页(必填)
var index = Number(<?php echo $page;?>);
/* //每页的条数(可选,默认每页10条) */
var pageNum=Number(10); 
/* //最大显示的页码的数目(可选,默认显示5个页码,页码数目必须大于等于1) */
var maxPageNum=Number(5);
//以下可忽略
//计算得出总页数
var count = (Num%pageNum)>0?(Num/pageNum+1):(Num/pageNum);
count=Math.floor(count);//取整转化为数据类型
//显示的最小页码,
var first=1;
//显示的最大页码,首先last<=count;其次last是小于等于count的最大数//last=index+maxPageNum/2;
var last =1;
var decrease=Math.floor(maxPageNum/2);//当前页向上增加值
var increase=Math.floor(maxPageNum/2);//当前页向下减少值
if(maxPageNum>=1){
 if(maxPageNum==1){//最多显示一页时
  first=index<=count?index:count; 
  last=index<=count?index:count;  
 }else{
   //first要大于零
   first=(index-decrease);
   while(first<=0){
    first++;
   } 
   //first判断显示的最后一页
   if((count-index)<=decrease){
    var diff=count-first;
    while(diff<maxPageNum-1){
     if(first==1){
      break;
     }else{
      --first;
      diff=count-first;
     }
    }
   }
   //last要小于count
   last=(index+increase);
   while(last>=1){
    if(last<=count){
     break;
    }
    last--;
   } 
   //last//判断显示的最后一页与maxPageNum的关系
   last=last>=maxPageNum?last:(maxPageNum>count?count:maxPageNum);
 }
}else{
 alert("至少需要显示一个页码!");
}
var prev = index - 1;//上一页
var next = index+ 1;//下一页 
var str = "<tr>";
if(count==0){
 str += "<td>共<a href='#'>0</a>页</td><td>";
}else if(index>count||index<=0){
 str="<td style='color:blue;' >页码超出范围</td>";
}else if (count > 0) {
 str += "<td>";
 if(first>1){
  str += "  <span style='color:#4169E1;' >...</span>  ";
 }
 var i=1;
 for(i=first;i<=last; i++){
  if(i==index){
   str += "  <a href='#' style='color:#4169E1;' onclick='submit(" + i + ");'>[" + i+ "]</a>  ";
  }else{
   str += "  <a href='#' onclick='submit(" + i + ");'>" + i+ "</a>  ";
  }
 } 
  if(last<count){
   str += "  <span style='font-size:16px;color:#4169E1;' >...</span>  "; 
  }
  str+="</td><td style='font-size: 14px;'>共<a href='#first' style='color:#4169E1;font-size: 16px;' >"+ Num +"</a>条</td>";
  /* if(index!=1){
   str +="<td style='width:60px;font-family: 微软雅黑;font-size: 14px;' ><a href='#' id='prev' onclick='submit(" + prev+ ");'>上一页</a></td>"; 
  }
  if(index<count){
   str +="<td style='width:60px;font-family: 微软雅黑;font-size: 14px;'><a href='#' id='next' onclick='submit("+ next + ");'>下一页</a></td>";
  }*/
  if(index!=1&&count>1){
   str += "<td style='width:40px;font-family: 微软雅黑;font-size: 14px;white-space: nowrap;'>  <a href='#' id='first' name='first' onclick='submit(1);'>首页</a>  </td>";
  }
  if(index!=count&&count>1&&index<count){
   str += "<td style='width:40px;font-family: 微软雅黑;font-size: 14px;white-space: nowrap;'>  <a href='#' onclick='submit(" + count+ ");'>尾页</a>  </td>" ;
  } 
   str+="</tr>";
}
//分页区域填写
$('.page').html(str);
<table class="page">
<tr><td>此处分页只需要传递给我当前页码和总页数即可</td></tr>
</table>
//根据页码查询,
function submit(pageIndex) {
 //var sortInfo = $.getUrlParam('sortInfo');//判断是哪一个页面的查询
 var url = "<?php echo current_url();?>?page="+pageIndex+"&field=<?php echo$field;?>&value=<?php echo $field_value;?>";
 window.location.href=url;
}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
DIV菜单层实现代码
Nov 19 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
js格式化时间的方法
Dec 18 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 Javascript
javascript实现网页字符定位的方法
Jul 14 #Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 #Javascript
jquery获得当前html页面源码的方法
Jul 14 #Javascript
javascript实现动态表头及表列的展现方法
Jul 14 #Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 #Javascript
常用jQuery代码分享
Jul 14 #Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 #Javascript
You might like
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
10款实用的PHP开源工具
2015/10/23 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python 读入多行数据的实例
2018/04/19 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
Python list运算操作代码实例解析
2020/01/20 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
大学应届生求职简历的自我评价
2013/10/08 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
迎新生晚会主持词
2015/06/30 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
教师远程培训心得体会
2016/01/09 职场文书