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 dataTable 获取某行数据
May 05 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 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设计模式 Strategy(策略模式)
2011/06/26 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
flash 得到自身url参数的代码
2009/11/15 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python语言快速上手学习方法
2018/12/14 Python
django Admin文档生成器使用详解
2019/07/22 Python
自定义django admin model表单提交的例子
2019/08/23 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
django使用graphql的实例
2020/09/02 Python
python反扒机制的5种解决方法
2021/02/06 Python
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
法人委托书范本
2014/04/04 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
演讲稿开场白台词
2014/08/25 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
刑事代理授权委托书
2014/09/17 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
收银员岗位职责范本
2015/04/07 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang