当前位置：Gxlcms > JavaScript > jquery分页优化操作实例分析

jquery分页优化操作实例分析

时间：2021-07-01 10:21:17 帮助过：17人阅读

本文实例讲述了jquery分页优化操作。分享给大家供大家参考，具体如下：

前言

上次写了博客 jquery分页显示，文章的jquery分页方式虽然可以通过js实现分页，但是也存在明显的弊端。

该篇文章的思路是，每次通过ajax请求获取到记录，然后通过判断当前页面，显示或者隐藏记录，以实现分页效果。但是这种方式，每次切换分页都需要从新请求一次记录，频繁的查询数据库。

下面提供一种，只需要加载一次（查询一次数据库）就能实现分页的思路。我们加载记录之后，生成所有的分页并隐藏，然后默认显示第一页。切换分页通过，分页div的显示和隐藏来实现。

创建数据库语句

  1. CREATE TABLE `news` (
  2.  `id` int(11) NOT NULL AUTO_INCREMENT,
  3.  `title` varchar(255) NOT NULL,
  4.  `time` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  5.  PRIMARY KEY (`id`)
  6. ) ENGINE=InnoDB AUTO_INCREMENT=201 DEFAULT CHARSET=utf8

记录查询页面

test.php

  1. <?php
  2. header("Content-Type:text/html;Charset=utf-8");
  3. $mysqli = new mysqli("localhost","root","","test");
  4. $mysqli->set_charset("utf8");
  5. $query = $mysqli->query("SELECT * FROM news");
  6. $res = $query->fetch_all(MYSQLI_ASSOC);
  7. echo json_encode($res);

分页显示页面

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <style type="text/css">
  7.     .page{
  8.       width: 1000px;
  9.       margin-left: auto;
  10.       margin-right: auto;
  11.       text-align:center;
  12.       display:none;
  13.     }
  14.   </style>
  15. </head>
  16. <body>
  17.   <div id="listTag">
  18.   </div>
  19. </body>
  20. <script type="text/javascript" src="http://localhost/jquery/jquery.js"></script>
  21. <script type="text/javascript">
  22.   $(function(){
  23.     var avgNum = 18; //每页显示18条记录
  24.     $.ajax({
  25.       type:"GET",
  26.       url:"http://localhost/test.php",
  27.       dataType:"json",
  28.       success:function(data){
  29.         var totalPage = data.length;  //获取总的记录数
  30.         var pageNum = Math.ceil(totalPage/avgNum); //计算得到页数
  31.         var content = '';
  32.         for(var i=1;i<=pageNum;i++){
  33.           content += '<div id="page'+i+'" class="page"><ul>';
  34.           for(var j=((i-1)*avgNum);j<(i*avgNum)&&j<totalPage;j++){
  35.             content += '<li>'+data[j].title+'</li>';
  36.           }
  37.           content += '</ul>';
  38.           content += '<hr/><div>';
  39.           //前一页
  40.           if(i == 1){
  41.             content += '<<  ';
  42.           }else{
  43.             content += '<a href="javascript:showPage('+(i-1)+')" rel="external nofollow" rel="external nofollow" ><<</a>  ';
  44.           }
  45.           //后一页
  46.           if(i == pageNum){
  47.             content += '>>  ';
  48.           }else{
  49.             content += '<a href="javascript:showPage('+(i+1)+')" rel="external nofollow" rel="external nofollow" >>></a>  ';
  50.           }
  51.           content += '</div></div>';
  52.         }
  53.         //生成所有的div，并隐藏
  54.         $("#listTag").append(content);
  55.         showPage(1);
  56.       }
  57.     });
  58.   });
  59.   function showPage(num){
  60.     $("#page"+num).show();
  61.     $("#page"+num).siblings().hide();
  62.   }
  63. </script>
  64. </html>

分页效果：

这里写图片描述

分页样式二

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <style type="text/css">
  7.     .page{
  8.       width: 1000px;
  9.       margin-left: auto;
  10.       margin-right: auto;
  11.       text-align:center;
  12.       display:none;
  13.     }
  14.     .active{
  15.       color:red;
  16.     }
  17.   </style>
  18. </head>
  19. <body>
  20.   <div id="listTag">
  21.   </div>
  22. </body>
  23. <script type="text/javascript" src="http://localhost/jquery/jquery.js"></script>
  24. <script type="text/javascript">
  25.   $(function(){
  26.     var avgNum = 18; //每页显示18条记录
  27.     $.ajax({
  28.       type:"GET",
  29.       url:"http://localhost/test.php",
  30.       dataType:"json",
  31.       success:function(data){
  32.         var totalPage = data.length;  //获取总的记录数
  33.         var pageNum = Math.ceil(totalPage/avgNum); //计算得到页数
  34.         var content = '';
  35.         for(var i=1;i<=pageNum;i++){
  36.           content += '<div id="page'+i+'" class="page"><ul>';
  37.           for(var j=((i-1)*avgNum);j<(i*avgNum)&&j<totalPage;j++){
  38.             content += '<li>'+data[j].title+'</li>';
  39.           }
  40.           content += '</ul>';
  41.           content += '<hr/><div>';
  42.           //前一页
  43.           if(i == 1){
  44.             content += '<<  ';
  45.           }else{
  46.             content += '<a href="javascript:showPage('+(i-1)+')" rel="external nofollow" rel="external nofollow" ><<</a>  ';
  47.           }
  48.           //显示所有的页码
  49.           for(var p=1;p<=pageNum;p++){
  50.             content += '<a href="javascript:showPage('+p+')" rel="external nofollow" class="p'+p+'">'+p+'</a>  ';
  51.           }
  52.           //后一页
  53.           if(i == pageNum){
  54.             content += '>>  ';
  55.           }else{
  56.             content += '<a href="javascript:showPage('+(i+1)+')" rel="external nofollow" rel="external nofollow" >>></a>  ';
  57.           }
  58.           content += '</div></div>';
  59.         }
  60.         //生成所有的div，并隐藏
  61.         $("#listTag").append(content);
  62.         showPage(1);
  63.       }
  64.     });
  65.   });
  66.   function showPage(num){
  67.     $("#page"+num).show();
  68.     $("#page"+num).siblings().hide();
  69.     $(".p"+num).addClass("active");
  70.     $(".p"+num).siblings().removeClass("active");
  71.   }
  72. </script>
  73. </html>

显示效果

这里写图片描述

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！