纯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 相关文章推荐
Javascript 生成指定范围数值随机数
Jan 09 Javascript
怎么清空javascript数组
May 11 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
js中值引用和地址引用实例分析
Jun 21 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
微信公众号网页分享功能开发的示例代码
May 27 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
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
PHP加密解密类实例分析
2015/04/20 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
JavaScript快速调试的两个技巧
2020/11/04 Javascript
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
护理自我鉴定范文
2013/10/06 职场文书
车间班组长岗位职责
2013/11/13 职场文书
护士辞职信模板
2014/01/20 职场文书
爱情保证书
2015/01/17 职场文书
会计主管岗位职责
2015/04/02 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB