纯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 相关文章推荐
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
javascript实现2048游戏示例
May 04 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
解决layui laydate 时间控件一闪而过的问题
Sep 28 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
手写实现JS中的new
Nov 07 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 strtr() 函数使用说明
2008/11/21 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
早该知道的7个JavaScript技巧
2013/03/27 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
python访问纯真IP数据库的代码
2011/05/19 Python
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python输入多行字符串的方法总结
2019/07/02 Python
python 随机森林算法及其优化详解
2019/07/11 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
python常用运维脚本实例小结
2020/02/14 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
PHP开发的一般流程
2013/08/13 面试题
北京振戎融通Java面试题
2015/09/03 面试题
大学竞选班干部演讲稿
2014/08/21 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
使用Pytorch训练two-head网络的操作
2021/05/28 Python