纯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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 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
drupal 代码实现URL重写
2011/05/04 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
王纯业的Python学习笔记 下载
2007/02/10 Python
在python中的socket模块使用代理实例
2014/05/29 Python
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
水污染治理专业毕业生推荐信
2013/11/14 职场文书
七年级历史教学反思
2014/02/05 职场文书
师德建设实施方案
2014/03/21 职场文书
乔迁之喜主持词
2014/03/27 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
法定代表人资格证明书
2014/09/11 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
二胎满月酒致辞
2015/07/29 职场文书
医生行业员工的辞职信
2019/06/24 职场文书