纯JS前端实现分页代码


Posted in Javascript onJune 21, 2016

先给大家展示下效果图,如果大家感觉效果不错,请参考实现代码:

纯JS前端实现分页代码纯JS前端实现分页代码

因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页去处理的,我就是用这块代码写了两个稍微不同一些的分页!公共的代码抽取的也差不多,主要就是ajax后台以及返回的值不同而已,只要把总页码的值获取到,点击首页/下一页等传值正确的话,基本上分页是不会出什么问题的

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

废话不多说,直接上代码了!

注:本项目是全程使用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);
}
});
}

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

//抽取拼串的方法
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)); 
}

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

Javascript 相关文章推荐
JavaScript中的Math 使用介绍
Apr 21 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
vue构建动态表单的方法示例
Sep 22 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 #Javascript
jQuery代码性能优化的10种方法
Jun 21 #Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 #Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 #Javascript
JavaScript检测原始值、引用值、属性
Jun 20 #Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 #Javascript
JS实现鼠标框选效果完整实例
Jun 20 #Javascript
You might like
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
简单了解JavaScript作用域
2020/07/31 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
在Django中创建第一个静态视图
2015/07/15 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
大学生毕业求职自荐书范文
2014/02/04 职场文书
天地会口号
2014/06/17 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
python执行js代码的方法
2021/05/13 Python
使用python求解迷宫问题的三种实现方法
2022/03/17 Python
Nginx的基本概念和原理
2022/03/21 Servers
MySQL池化框架学习接池自定义
2022/07/23 MySQL