html⼀个页⾯分页代码怎么写，纯JS前端实现分页代码
先给⼤家展⽰下效果图，如果⼤家感觉效果不错，请参考实现代码：
因为这是我⾃⼰第⼀次动⼿⽤js写分页，写的应该也不是很完美，有些公共的没有抽取出来，但是⽤起来还是可以的，这块代码是可以把它当做公共的分页去处理的，我就是⽤这块代码写了两个稍微不同⼀
些的分页！公共的代码抽取的也差不多，主要就是ajax后台以及返回的值不同⽽已，只要把总页码的值获取到，点击⾸页/下⼀页等传值正确的话，基本上分页是不会出什么问题的
⽹上确实有很多分页的插件以及开源代码，单本是⼀个后台开发猿，前台css等样式还驾驭不住，所以就开始⾃⼰去写了。其实这个分页原理很简单，就是⽤ajax往后台传值(当前页码)，后台使⽤limit进⾏分页。
废话不多说，直接上代码了！
注：本项⽬是全程使⽤js来写的，前台的数据通过ajax进⾏获取，然后再进⾏拼装，动态加载到页⾯。
1.先把上⼀页，下⼀页等的代码附上(⾥⾯的值都是伪值，下⾯会在js⾥进⾏重新赋值的！)
⾸ 页
上⼀页
下⼀页
尾 页
共13855页 到第页
网站底部代码js特效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();//当前页
"+page+"/"+pading+"");
$('#countpage').html(""+page+"
$('#span_number').html("共"+pading+"页 到第页")
}else{
"+0+"/"+0+"");
$('#countpage').html(""+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");
}
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。