html一个页面分页代码怎么写,纯JS前端实现分页代码
先给大家展示下效果图,如果大家感觉效果不错,请参考实现代码:
因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页去处理的,我就是用这块代码写了两个稍微不同一些的分页!公共的代码抽取的也差不多,主要就是ajax后台以及返回的值不同而已,只要把总页码的值获取到,点击首页/下一页等传值正确的话,基本上分页是不会出什么问题的
网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了。其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用limit进行分页。
废话不多说,直接上代码了!
注:本项目是全程使用js来写的,前台的数据通过ajax进行获取,然后再进行拼装,动态加载到页面。
1.先把上一页,下一页等的代码附上(里面的值都是伪值,下面会在js里进行重新赋值的!)
首 页
上一页
- 1
- 2
- 3
- ...
- 13855
下一页
尾 页
共13855页 到第页
2.首先在页面放两个隐藏域,一个是当前页码,一个是总页码,总页码是页面加载完,从后台查询出来后直接附上值的,当前页码是没操作一个,就要对当前页码赋值
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
{
/*****因为此页面是动态加载的,这里主要就是进行拼串,代码也不少,就不漏出来占空间了*****/
}
//开始是分页的核心了
if(data.length>0){
//设置页码
var pading = data[0].padingnum;//总页码
$('#totalpage').val(pading);
var page = $('#jiazai').val();//当前页
$('#countpage').html(""+page+"/"+pading+"");
$('#span_number').html("共"+pading+"页 到第页")
}else{
$('#countpage').html(""+0+"/"+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
//下面代码看着是比较麻烦,但是也不难理解 全是一样的代码,只不过是加了些判断
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));
}
好了,到这里分页就完成了,如果你们需要使用的话,可能会话费一会去理解我的代码,其实代码不难,我是使用了两个小时把它写完的,只要一行一行代码看,并且自己再加注释,把这块弄过去,不出半小时绝对搞定!
html一个页面分页代码怎么写,纯JS前端实现分页代码相关推荐
- 纯JS前端分页方法(JS分页)
1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...
- KingPager,自己做的分页控件,纯JS,支持所有语言
效果图如下: 简介: 1.JQuery分页控件,纯JS,支持任何语言 2.全部样式可通过CSS自定义(默认的就很好看) 3.非常灵活,1行代码即可实现分页 调用示例: <html xmlns=& ...
- php后台登录页修改成ajax,使用php后台给自己做一个页面路由,配合ajax实现局部刷新。(示例代码)...
今天就要放假了,把近来囤积的小玩意儿总结整理一下. 在请求一个html页面来嵌入到当前页会有一个问题,就是跟随请求过来的html他的样式表和脚本会失效.是因为文档加载的先后顺序等问题造成的.因此,加载 ...
- html页面转盘如何实现,原生(纯)js+html+css实现移动端抽奖转盘系统
这是我前个月使用纯javascript+html写出的一个抽奖转盘系统,按理来说,我应该在当时做完这个小系统,就应该立即写bike总结才对,但是本人之前没有在网上写博客的习惯,平时总结更加习惯写在纸上 ...
- javascript笔记——点击按钮(或超链接)如何跳转到另外一个页面并执行目标页面的js函数...
页面跳转同时执行js代码$(function(){});url参数传递 标题的前半部分其实不必赘述,按钮也可以换成超链接.. 假设是需要在A页面上的一个按钮,点击后跳转到B页面,传一些参数后且并B页面 ...
- php网页文字居中代码怎么写,html里文字居中代码怎么写?_WEB前端开发
web前端是什么意思?_WEB前端开发 web前端就是前端网络编程,也被认为是用户端编程,是为了网页或者网页应用,而编写HTML,CSS以及JS代码,所以用户能够看到并且和这些页面进行交流. html ...
- html中table表格分页,纯JS实现表格分页
思路: 1.讲表格内容存入一个变量 2.通过点击按钮从表格中调取数据 3.讲调取的数据填入表格中 表格分页 html,body { margin:0; height:100%; } .barcon { ...
- web前端字体居中_html里文字居中代码怎么写?_WEB前端开发,html,css
web前端是什么意思?_WEB前端开发 web前端就是前端网络编程,也被认为是用户端编程,是为了网页或者网页应用,而编写HTML,CSS以及JS代码,所以用户能够看到并且和这些页面进行交流.html里 ...
- html游戏代码怎么写,HTML游戏的编写,代码的意思已经写上,请大佬们指导
top of a table game (先按照HTML格式去写开头) 这个标签不会再页面上显示,在源代码码起到装饰的作用) ( | ╱ | ...
最新文章
- 【AI】吴恩达斯坦福机器学习中文笔记汇总
- matlab的rvctools,rvctools 机器人工具箱,主要用于 仿真, 型很强。 matlab 270万源代码下载- www.pudn.com...
- Android ANR详解
- elastichd安装部署
- tcp/ip 协议栈Linux内核源码分析11 邻居子系统分析二 arp协议的实现处理
- 成功解决Redirection is not supported
- Clustering by density peaks and distance
- mysql-5.5.56配置_mysql 5.5.56免安装版配置方法
- 计算机科学与技术专业机遇与挑战,科学网—填报专业大类志愿:机遇与挑战 - 雒运强的博文...
- WCF分布式安全开发实践(6):传输安全模式之自定义X509Certificate证书验证
- 队列定义、队列的存储结构
- ssms的导入功能_SSMS 17中的新增功能; PowerShell和DAX
- java往jsp页面嵌入弹出框_jsp页面制作弹出框
- 数学和计算机竞赛,数学奥赛VS信息学奥赛,数学基础扎实的孩子
- json数据格式转换成csv数据格式,并保存
- 解决myeclipse html页面乱码问题
- 客所思S10外置USB独立声卡调试教程:K歌、聊天、变声、喊麦、电音等效果
- 文件储存器 - IP通讯技术
- SSM综合复习之MyBatis
- 数据库关系代数操作与扩展操作
热门文章
- js获取html元素并且修改属性,JavaScript中获取和修改元素属性的值
- android adb工具linux,Ubuntu Android ADB 使用
- python3读取linux文件,Python3读取文件小技巧
- 如何在ASP.NET Core中上传文档
- TypeScript事件处理程序
- Visual Studio 2019 RC入门——第1部分
- 使用.NET Core 2开发部署Angular 5项目
- android 绑定微信号,Android工作整理-梳理微信的登录、分享与支付
- pytorch argmax_PyTorch深度学习模型的服务化部署
- css 根据宽度适应