jquery分页优化操作实例分析

2024-12-20 15:15:01

本文实例讲述了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 += '<< &nbsp';
          }else{
            content += '<a href="javascript:showPage('+(i-1)+')" rel="external nofollow" rel="external nofollow" ><<</a> &nbsp';
          }
          //后一页
          if(i == pageNum){
            content += '>> &nbsp';
          }else{
            content += '<a href="javascript:showPage('+(i+1)+')" rel="external nofollow" rel="external nofollow" >>></a> &nbsp';
          }
          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 += '<< &nbsp';
          }else{
            content += '<a href="javascript:showPage('+(i-1)+')" rel="external nofollow" rel="external nofollow" ><<</a> &nbsp';
          }
          //显示所有的页码
          for(var p=1;p<=pageNum;p++){
            content += '<a href="javascript:showPage('+p+')" rel="external nofollow" class="p'+p+'">'+p+'</a> &nbsp';
          }
          //后一页
          if(i == pageNum){
            content += '>> &nbsp';
          }else{
            content += '<a href="javascript:showPage('+(i+1)+')" rel="external nofollow" rel="external nofollow" >>></a> &nbsp';
          }
          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表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

jquery+json实现数据列表分页示例代码

该实例中,新闻数据列表未使用表格显示.下面将所有源码附上,其中用到jquery插件. 复制代码代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <c:
jquery实现的分页显示功能示例

本文实例讲述了jquery实现的分页显示功能.分享给大家供大家参考,具体如下: 我们在显示文章列表的时候,通常需要分页显示. 一种方式是通过SQL查询的limit进行分页,即只查询该页面的数据. 另外一种方式是查询出所有的数据,传递给前段,然后用jquery控制只显示我们想看到的分页. html代码 <div class="am-g"> <div class="am-u-sm-12" id="listTag"> </
jquery dataTable 后台加载数据并分页实例代码

使用 dataTable后台加载数据并分页.网上版本很多,但很多都是不能用或者不详细的,这里是已经验证过的. 引用 js文件 <script src="static/ace/js/jquery-2.0.3.min.js"></script> <script src="static/ace/js/jquery.dataTables.min.js"></script> <script src="static
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)

理由:jquery简单,兼容性好且容易封装.废话不多说,马上开始我们的Jquery插件编写吧.应该有很多人写过类似的插件,我也是有些模仿flexGrid的形式. 需求:GridView显示数据,无刷新分页,无刷新排序,无刷新过滤(搜索数据),基于ASP.NET(我们这里有ashx一般处理文件来实现). 使用到技术:asp.net2.0, jquery,css 首先写的是jquery插件方面,使用的核心函数还是jquery的ajax函数,方便快捷. 复制代码代码如下: $.ajax({ type
JQuery+Ajax无刷新分页的实例代码

先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单就四个字段分别是News_id News_title News_time News_readtimes 二.前台页面代码: 复制代码代码如下: <head runat="server"> <title>JQuery无刷新分页</title> <link hre
基于Jquery实现表格动态分页实现代码

当页面点击分页图标时,程序会自动去后台获取对应页数的记录. 关键代码如下: 需要引入的css和js文件有: 复制代码代码如下: <link rel="stylesheet" type="text/css" href="<%=basePath %>css/theme/default/css/jpage.css"></link> <link ID="skin" rel="sty
JS+Ajax+Jquery实现页面无刷新分页以及分组超强的实现第1/2页

复制代码代码如下: <%@ Page language="c#" Codebehind="GroupText.aspx.cs" AutoEventWireup="false" Inherits="test1.GroupText" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML&g
jquery pagination插件实现无刷新分页代码

先把要用到的文件依次进入进来: 复制代码代码如下: <script src="common/jquery.js" type="text/javascript"></script> <script src="common/jquery.pagination.js" type="text/javascript"></script> <link href="commo
Jquery简单分页实现方法

本文实例讲述了Jquery简单分页实现方法.分享给大家供大家参考.具体如下: js代码: function dolistpage(pagerow,pagenum,rowcount,pagecount){ $("#pagemsg").html("每页显示"+pagerow+"条,当前" + pagenum + "/" +pagecount + "页共" +rowcount + "条");
基于JQuery的Pager分页器实现代码

实例效果图如下使用说明需要使用jQuery库文件和JQuery Pager库文件(目前版本1.1) 素材准备分页器CSS样式文件,可复制如下CSS样式,可命名为Pager.css 复制代码代码如下: #pager ul.pages { display:block; border:none; text-transform:uppercase; font-size:10px; margin:10px 0 50px; padding:0; } #pager ul.pages li { list

jquery分页优化操作实例分析

相关推荐

随机推荐