首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

纯javascript实现分页(两种方法)

Posted in Javascript onAugust 26, 2015

先给大家贴效果图：

纯javascript实现分页(两种方法)

纯javascript实现分页(两种方法)

     网上确实有很多分页的插件以及开源代码，单本是一个后台开发猿，前台css等样式还驾驭不住，所以就开始自己去写了。其实这个分页原理很简单，就是用ajax往后台传值(当前页码)，后台使用limit进行分页。

     因为这是我自己第一次动手用js写分页，写的应该也不是很完美，有些公共的没有抽取出来，但是用起来还是可以的，这块代码是可以把它当做公共的分页去处理的，我就是用

这块代码写了两个稍微不同一些的分页！公共的代码抽取的也差不多，主要就是ajax后台以及返回的值不同而已，只要把总页码的值获取到，点击首页/下一页等传值正确的话，基本上分页是不会出什么问题的

纯js实现分页方法一：

废话不多说，直接上代码了！     

注：本项目是全程使用js来写的，前台的数据通过ajax进行获取，然后再进行拼装，动态加载到页面。

1.先把上一页，下一页等的代码附上(里面的值都是伪值，下面会在js里进行重新赋值的！)

<ul class="page" id="page">
  <li id="shouye" class="p-prev disabled">
   <a href='javascript:indexpage(1);'>首 页</a>
  </li>
  <li id="shangyiye" class="p-prev disabled" >
   <a href='javascript:indexpage(-1);'><i></i>上一页</a>
  </li>
  <li ><a id="one" href="javascript:void(0);" >1</a></li>
  <li><a id="two" href="javascript:void(0);" >2</a></li>
  <li><a id="three" href="javascript:void(0);" >3</a></li>
  <li class="more"><a id="five" href="javascript:void(0);" >...</a></li>
  <li><a id="fore" href="javascript:void(0);" >13855</a></li>
  <li class='p-next'>
   <a href='javascript:indexpage(-3);' onclick="jumpToPage('2','/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','13855', listPageCallback);">下一页<i></i></a>
  </li>
  <li id="weiye" class='p-next'>
   <a href='javascript:void(0);' onclick="indexpage(0);">尾 页</a>
  </li>
  <li class="total">
      <span id="span_number">共13855页 到第<input type="text" id="input_number" class="page-txtbox" />页
       <input name="" value="确定" type="button" onclick="jumpToPage(jQuery('#input_number').val(),'/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','13855', listPageCallback);" class="page-btn"/>
      </span>
  </li>
 </ul>

2.首先在页面放两个隐藏域，一个是当前页码，一个是总页码，总页码是页面加载完，从后台查询出来后直接附上值的，当前页码是没操作一个，就要对当前页码赋值

<input id="jiazai" type="hidden" ></input><!-- 当前页码 -->
 <input id="totalpage" type="hidden" ></input><!-- 总页码 -->

3.写一个页面加载完的function，给总页码和当前页码赋值

$(function(){
  $('#jiazai').val(1);//给当前页码进行赋值，默认为第一页
  ajaxfunction(page,arg,chipssort,'');//这个方法是抽取的ajax后台访问的方法
});

 4.抽取的ajax方法，此页面会用到好几次这个方法，所有把它收取了出来，因为页面的数据时通过ajax从后台获取到的，后台返回的是一个List集合

//抽取ajax的方法
function ajaxfunction(page,arg,chipssort,fontval){
 $.ajax({
  type:'POST',
  url:'/admin/receptionchips/showlist',//请求的url地址
  data:{
   page:page,
   sort:arg,
   chipssort:chipssort,
   fontval:fontval
  },
  dataType:'json',
  contentType:'application/x-www-form-urlencoded; charset=utf-8',
  success:function(data){
   //返回值在进行访问抽取的方法，从后台返回
   commonfunction(data);
  }
 });
}

 5.代码看到这也不是很多，最后一个了

//抽取拼串的方法
function commonfunction(data){
 $('#projectlist').find("li").remove();
  for (var i=0;i<data.length;i++ )
  { 
  /*****因为此页面是动态加载的，这里主要就是进行拼串，代码也不少，就不漏出来占空间了*****/<br>




  }<br>


//开始是分页的核心了
  if(data.length>0){
   //设置页码
   var pading = data[0].padingnum;//总页码
   $('#totalpage').val(pading);
   var page = $('#jiazai').val();//当前页
    $('#countpage').html("<b id='currentPageNo'>"+page+"</b>/"+pading+"");
    $('#span_number').html("共"+pading+"页 到第<input type='text' id='input_number' class='page-txtbox' />页<input name='' value='确定' type='button' onclick='indexpage(-2)'/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','"+pading+"', listPageCallback);' class='page-btn'/>")
  }else{
   $('#countpage').html("<b id='currentPageNo'>"+0+"</b>/"+0+"");
  }
  //设置分页的底部 就是 首页 1 2 3 4 5 6 尾页
  var pading = data[0].padingnum;//总页码href="javascript:void(0);"
  var nowpage = $('#jiazai').val();//当前页
  //one two three five fore<br>


//下面代码看着是比较麻烦，但是也不难理解 全是一样的代码，只不过是加了些判断
  if(nowpage<5 ){
   $('#one').text(1);
   $('#one').attr('href','javascript:pagenum("'+1+'");');
   $('#two').text(2);
   $('#two').attr('href','javascript:pagenum("'+(2)+'");');
   $('#three').text(3);
   $('#three').attr('href','javascript:pagenum("'+(3)+'");');
   $('#five').text(4);
   $('#five').attr('href','javascript:pagenum("'+(4)+'");');
   $('#fore').text(5);
   $('#fore').attr('href','javascript:pagenum("'+(5)+'");');
   $('#five').parent().show();
   $('#fore').parent().show();
  }else{
   //alert("已经不是第五页了");
   //设置中间的为当前页
   $('#one').text(Number(nowpage)-2);
   $('#one').attr('href','javascript:indexpage("'+(Number(nowpage)-2)+'");');
   $('#two').text(Number(nowpage)-1);
   $('#two').attr('href','javascript:indexpage("'+(Number(nowpage)-1)+'");');
   $('#three').text(nowpage);
   $('#three').attr('href','javascript:indexpage("'+(nowpage)+'");');
   $('#five').parent().show();
   $('#fore').parent().show();
   //判断下一页是否超过了总页数
   if(Number(nowpage)+1>pading){
    $('#five').parent().hide();
    $('#fore').parent().hide();
   }else{
    $('#five').parent().show();
    $('#five').text(Number(nowpage)+1);
    $('#five').attr('href','javascript:indexpage("'+(Number(nowpage)+1)+'");');
   }
   //判断下一页的第二页是否超过了总页数
   if(Number(nowpage)+2>pading){
    $('#fore').parent().hide();
   }else{
    $('#fore').parent().show();
    $('#fore').text(Number(nowpage)+2);
    $('#fore').attr('href','javascript:indexpage("'+(Number(nowpage)+2)+'");');
   }
  }
  //如果总页数小于5，这块代码主要就是设置 1 2 3 4 5 这些的显示和隐藏的
  if(pading==0){
   $('#one').parent().hide();
   $('#two').parent().hide();
   $('#three').parent().hide();
   $('#five').parent().hide();
   $('#fore').parent().hide();
  }else if(pading==1){
   $('#shouye').hide();
   $('#weiye').hide();
   $('#one').parent().hide();
   $('#two').parent().hide();
   $('#three').parent().hide();
   $('#five').parent().hide();
   $('#fore').parent().hide();
  }else if(pading==2){
   $('#one').parent().show();
   $('#two').parent().show();
   $('#three').parent().hide();
   $('#five').parent().hide();
   $('#fore').parent().hide();
  }else if(pading==3){
   $('#one').parent().show();
   $('#two').parent().show();
   $('#three').parent().show();
   $('#five').parent().hide();
   $('#fore').parent().hide();
  }else if(pading==4){
   $('#one').parent().show();
   $('#two').parent().show();
   $('#three').parent().show();
   $('#five').parent().show();
   $('#fore').parent().hide();
  }else{
   $('#one').parent().show();
   $('#two').parent().show();
   $('#three').parent().show();
   $('#five').parent().show();
   $('#fore').parent().show();
  }
  //设置高亮显示的，就是是第一页时，1亮，第二页时 2亮
  $('#page a').each(function() {
   $(this).parent().removeClass("current");
   if($(this).text()==nowpage){
    $(this).parent().addClass("current");
   }
  });
  //分页完返回页面顶端
  $("html,body").animate({scrollTop:0}, 500);
  //最后，给当前页码加1
 $('#jiazai').val(Number(bianlaing)+Number(1)); 
}

纯js实现分页方法二：

function goPage(pno,psize){ 
 var itable = document.getElementById("idData"); 
 var num = itable.rows.length;//表格行数 
 var totalPage = 0;//总页数 
 var pageSize = psize;//每页显示行数 
 if((num-1)/pageSize > parseInt((num-1)/pageSize)){  
  totalPage=parseInt((num-1)/pageSize)+1;  
  }else{  
  totalPage=parseInt((num-1)/pageSize);  
  }  
 var currentPage = pno;//当前页数 
 var startRow = (currentPage - 1) * pageSize+1;//开始显示的行  
  var endRow = currentPage * pageSize+1;//结束显示的行  
  endRow = (endRow > num)? num : endRow; 
 //前三行始终显示 
 for(i=0;i<1;i++){ 
 var irow = itable.rows[i]; 
 irow.style.display = "block"; 
 } 
 for(var i=1;i<num;i++){ 
 var irow = itable.rows[i]; 
 if(i>=startRow&&i<endRow){ 
 irow.style.display = "block"; 
 }else{ 
 irow.style.display = "none"; 
 } 
 } 
  var pageEnd = document.getElementById("pageEnd"); 
  var tempStr = ""; 
  if(currentPage>1){ 
  tempStr += "<a href="/" mce_href="/""#/" onmouseout='MM_swapImgRestore()' onmouseover=/"MM_swapImage('Image69','','images/back_buttom01_dowm.jpg',1)/" onClick=/"goPage("+(currentPage-1)+","+psize+")/"><img src="/" mce_src="/""images/back_buttom01.jpg/" name='Image69' width='38' height='15' border='0' id='Image69' /></a> " 
  }else{ 
  tempStr += "<a href="/" mce_href="/""#/" onmouseout='MM_swapImgRestore()' onmouseover=/"MM_swapImage('Image69','','images/back_buttom01_dowm.jpg',1)/"><img src="/" mce_src="/""images/back_buttom01.jpg/" name='Image69' width='38' height='15' border='0' id='Image69' /></a> "; 
  } 
  for (var i = 1; i <= totalPage; i++) { 
   if (i == currentPage) { 
     tempStr += i+" "; 
   } else { 
     tempStr += "<a href="/" mce_href="/""#/" onClick=/"goPage("+(i)+","+psize+")/">"+i+"</a> " 
   } 
  } 
  if(currentPage<totalPage){ 
  tempStr += "<a href="/" mce_href="/""#/" onmouseout=/"MM_swapImgRestore()/" onmouseover=/"MM_swapImage('Image68','','images/next_buttom01_dowm.jpg',1)/" onClick=/"goPage("+(currentPage+1)+","+psize+")/"><img src="/" mce_src="/""images/next_buttom01.jpg/" name='Image68' width='38' height='15' border='0' id='Image68' /></a> "; 
  }else{ 
  tempStr += "<a href="/" mce_href="/""#/" onmouseout=/"MM_swapImgRestore()/" onmouseover=/"MM_swapImage('Image68','','images/next_buttom01_dowm.jpg',1)/"><img src="/" mce_src="/""images/next_buttom01.jpg/" name='Image68' width='38' height='15' border='0' id='Image68' /></a> "; 
  } 
  tempStr +="<a href="/" mce_href="/""#top/" onmouseout=/"MM_swapImgRestore()/" onmouseover=/"MM_swapImage('Image20','','images/top_buttom01_dowm.jpg',1)/"><img src="/" mce_src="/""images/top_buttom01.jpg/" name='Image20' width='38' height='15' border='0' id='Image20' /></a>"; 
  document.getElementById("barcon").innerHTML = tempStr; 
  } 
 var base='<%=base%>'; 
 window.onload = function(){ 
  goPage(1,10); 
 } 
<div id="barcon" name="barcon"></div>

温馨提示：js代码中上一页 下一页定义的图片根据自己需求可以改的

好了，到这里分页就完成了，如果你们需要使用的话，可能会话费一会去理解我的代码，其实代码不难，我是使用了两个小时把它写完的，只要一行一行代码看，并且自己再加注释，把这块弄过去，不出半小时绝对搞定！

好了，到此为止用两种方法给大家介绍纯js实现分页就结束了，有不明白的地方，欢迎提出，交流，共同学习进步，谢谢。

纯javascript实现分页(两种方法)

- Author -

weiloong

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript下过滤数组重复值的代码
Sep 10 Javascript
ajax更新数据后，jquery、jq失效问题
Mar 16 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 #Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 #Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 #Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 #Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享（2款）
Aug 26 #Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 #Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 #Javascript
算法(1) OVERLORD(1) 时钟(1) 2022年7月新番(1) Vscode(3) 人人对战(1) SSH(3) mysql(6) character(1) 数据表(1)
You might like
php基础知识:类与对象(1)
2006/12/13 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
php中的观察者模式简单实例
2015/01/20 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
[36:52]DOTA2真视界：基辅特锦赛总决赛
2017/05/21 DOTA
python模拟enum枚举类型的方法小结
2015/04/30 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
Python类继承和多态原理解析
2020/02/05 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
YSL圣罗兰美妆官方旗舰店：购买YSL口红
2018/04/16 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
运动会通讯稿500字
2014/02/20 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
2015年预算员工作总结
2015/05/14 职场文书
旷工检讨书大全
2015/08/15 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫
python 学习GCN图卷积神经网络
2022/05/11 Python
Fluentd搭建日志收集服务
2022/09/23 Servers