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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jquery实现轮播图特效
Apr 12 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 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
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
php常用表单验证类用法实例
2015/06/18 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
JavaScript window.location对象
2014/11/14 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
详解webpack babel的配置
2018/01/09 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
Python的一些用法分享
2012/10/07 Python
详解python单例模式与metaclass
2016/01/15 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
python 如何上传包到pypi
2020/12/24 Python
毕业生自我推荐
2013/11/04 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
给校长的一封建议书
2014/03/12 职场文书
会员活动策划方案
2014/08/19 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
学校捐款活动总结
2015/05/09 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技