纯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 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
PHP调用三种数据库的方法(3)
2006/10/09 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
使用SAE部署Python运行环境的教程
2015/05/05 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
英国最大的海报商店:GB Posters
2018/03/20 全球购物
C语言开发工程师测试题
2016/12/20 面试题
警察思想汇报
2014/01/04 职场文书
《猫》教学反思
2014/02/26 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
学生自我评语
2015/01/04 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL