jquery分页优化操作实例分析


Posted in jQuery onAugust 23, 2019

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

前言

上次写了博客 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);

分页显示页面

index.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;
    }
  </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>

分页效果:

jquery分页优化操作实例分析

分页样式二

<!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>

显示效果

jquery分页优化操作实例分析

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

jQuery 相关文章推荐
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
jquery实现的分页显示功能示例
Aug 23 #jQuery
jQuery表单选择器用法详解
Aug 22 #jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 #jQuery
jquery树形插件zTree高级使用详解
Aug 16 #jQuery
jQuery zTree树插件的使用教程
Aug 16 #jQuery
jQuery zTree插件快速实现目录树
Aug 16 #jQuery
jQuery zTree插件使用简单教程
Aug 16 #jQuery
You might like
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
PHP webshell检查工具 python实现代码
2009/09/15 Python
Python自动连接ssh的方法
2015/03/07 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
Python Pillow Image Invert
2019/01/22 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
Keras搭建自编码器操作
2020/07/03 Python
pycharm导入源码的具体步骤
2020/08/04 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
简短大学毕业感言
2014/01/18 职场文书
交通安全教育制度
2014/02/02 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
工程款申请报告
2015/05/15 职场文书
PHP新手指南
2021/04/01 PHP