本文实例讲述了jquery分页优化操作。分享给大家供大家参考,具体如下:
前言
上次写了博客 ,文章的jquery分页方式虽然可以通过js实现分页,但是也存在明显的弊端。
该篇文章的思路是,每次通过ajax请求获取到记录,然后通过判断当前页面,显示或者隐藏记录,以实现分页效果。但是这种方式,每次切换分页都需要从新请求一次记录,频繁的查询数据库。
下面提供一种,只需要加载一次(查询一次数据库)就能实现分页的思路。我们加载记录之后,生成所有的分页并隐藏,然后默认显示第一页。切换分页通过,分页div的显示和隐藏来实现。
创建数据库语句
create table `news` ( `id` int(11) not null auto_increment, `title` varchar(255) not null, `time` timestamp null default current_timestamp on update current_timestamp, primary key (`id`) ) engine=innodb auto_increment=201 default charset=utf8
记录查询页面
test.php
<?php header("content-type:text/html;charset=utf-8"); $mysqli = new mysqli("localhost","root","","test"); $mysqli->set_charset("utf8"); $query = $mysqli->query("select * from news"); $res = $query->fetch_all(mysqli_assoc); echo json_encode($res);
分页显示页面
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style type="text/css"> .page{ width: 1000px; margin-left: auto; margin-right: auto; text-align:center; display:none; } </style> </head> <body> <div id="listtag"> </div> </body> <script type="text/javascript" src="http://localhost/jquery/jquery.js"></script> <script type="text/javascript"> $(function(){ var avgnum = 18; //每页显示18条记录 $.ajax({ type:"get", url:"http://localhost/test.php", datatype:"json", success:function(data){ var totalpage = data.length; //获取总的记录数 var pagenum = math.ceil(totalpage/avgnum); //计算得到页数 var content = ''; for(var i=1;i<=pagenum;i++){ content += '<div id="page'+i+'" class="page"><ul>'; for(var j=((i-1)*avgnum);j<(i*avgnum)&&j<totalpage;j++){ content += '<li>'+data[j].title+'</li>'; } content += '</ul>'; content += '<hr/><div>'; //前一页 if(i == 1){ content += '<<  '; }else{ content += '<a href="javascript:showpage('+(i-1)+')" rel="external nofollow" rel="external nofollow" ><<</a>  '; } //后一页 if(i == pagenum){ content += '>>  '; }else{ content += '<a href="javascript:showpage('+(i+1)+')" rel="external nofollow" rel="external nofollow" >>></a>  '; } content += '</div></div>'; } //生成所有的div,并隐藏 $("#listtag").append(content); showpage(1); } }); }); function showpage(num){ $("#page"+num).show(); $("#page"+num).siblings().hide(); } </script> </html>
分页效果:
分页样式二
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style type="text/css"> .page{ width: 1000px; margin-left: auto; margin-right: auto; text-align:center; display:none; } .active{ color:red; } </style> </head> <body> <div id="listtag"> </div> </body> <script type="text/javascript" src="http://localhost/jquery/jquery.js"></script> <script type="text/javascript"> $(function(){ var avgnum = 18; //每页显示18条记录 $.ajax({ type:"get", url:"http://localhost/test.php", datatype:"json", success:function(data){ var totalpage = data.length; //获取总的记录数 var pagenum = math.ceil(totalpage/avgnum); //计算得到页数 var content = ''; for(var i=1;i<=pagenum;i++){ content += '<div id="page'+i+'" class="page"><ul>'; for(var j=((i-1)*avgnum);j<(i*avgnum)&&j<totalpage;j++){ content += '<li>'+data[j].title+'</li>'; } content += '</ul>'; content += '<hr/><div>'; //前一页 if(i == 1){ content += '<<  '; }else{ content += '<a href="javascript:showpage('+(i-1)+')" rel="external nofollow" rel="external nofollow" ><<</a>  '; } //显示所有的页码 for(var p=1;p<=pagenum;p++){ content += '<a href="javascript:showpage('+p+')" rel="external nofollow" class="p'+p+'">'+p+'</a>  '; } //后一页 if(i == pagenum){ content += '>>  '; }else{ content += '<a href="javascript:showpage('+(i+1)+')" rel="external nofollow" rel="external nofollow" >>></a>  '; } content += '</div></div>'; } //生成所有的div,并隐藏 $("#listtag").append(content); showpage(1); } }); }); function showpage(num){ $("#page"+num).show(); $("#page"+num).siblings().hide(); $(".p"+num).addclass("active"); $(".p"+num).siblings().removeclass("active"); } </script> </html>
显示效果
如对本文有疑问, 点击进行留言回复!!
offset、client、scroll (width,height、left,top、X,Y)
网友评论