1. Python技术站首页
  2. 数据库
  3. MongoDB

PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】

• MongoDB

下面我将详细讲解“PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】”的完整攻略。

概述

本篇攻略详细讲解如何使用PHP+Ajax实现无刷新分页功能，使网站用户能够在不刷新整个页面的情况下浏览分页内容。该攻略主要包含以下两条示例说明：

  1. 如何使用PHP和Ajax实现无刷新分页功能。
  2. 如何在PHP+Ajax的分页功能中添加搜索和排序功能。

示例1：PHP+Ajax实现无刷新分页功能

步骤1：创建数据表

首先需要创建一个数据表来存储要进行分页的数据，可以使用以下的SQL语句创建一个名为“users”的数据表：

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `age` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

步骤2：创建数据

接下来需要向“users”表中添加一些测试数据。可以使用以下的SQL语句：

INSERT INTO `users` (`name`, `age`) VALUES
('张三', 18),
('李四', 20),
('王五', 22),
('赵六', 24),
('钱七', 26),
('孙八', 28),
('周九', 30),
('吴十', 32);

步骤3：创建分页代码

在PHP页面中，我们可以使用以下代码实现分页功能：

<?php
//数据库连接参数
$servername = "localhost";
$username = "root";
$password = "123456";
$dbname = "test";

//建立连接
$conn = new mysqli($servername, $username, $password, $dbname);
//检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

//每页显示的数据条数
$pageSize = 3;
//当前页数
$page = intval($_GET['page']);
//计算数据的总数
$sql = "SELECT count(*) as count FROM `users`";
$result = $conn->query($sql);
$count = intval($result->fetch_assoc()['count']);
//计算总共的页数
$pageCount = ceil($count / $pageSize);

//计算当前页要显示的数据的起始位置
$startIndex = ($page - 1) * $pageSize;

//查询数据
$sql = "SELECT * FROM `users` LIMIT $startIndex, $pageSize";
$result = $conn->query($sql);

//将数据格式化为JSON格式输出
$data = array();
while ($row = $result->fetch_assoc()) {
    array_push($data, $row);
}
echo json_encode(array('data' => $data, 'pageCount' => $pageCount));

//关闭数据库连接
$conn->close();

?>

步骤4：创建HTML页面

创建一个HTML页面，用于显示分页数据，并通过Ajax获取分页数据。代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>无刷新分页</title>
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        function loadData(page) {
            $.ajax({
                url: 'data.php',
                type: 'get',
                dataType: 'json',
                data: {
                    page: page
                },
                success: function (data) {
                    var html = '';
                    for (var i = 0; i < data.data.length; i++) {
                        html += '<tr>';
                        html += '<td>' + data.data[i].id + '</td>';
                        html += '<td>' + data.data[i].name + '</td>';
                        html += '<td>' + data.data[i].age + '</td>';
                        html += '</tr>';
                    }
                    $('table tbody').html(html);
                    var pageCount = data.pageCount;
                    var pageHtml = '';
                    for (var i = 1; i <= pageCount; i++) {
                        if (i == page) {
                            pageHtml += '<li class="active"><a href="#">' + i + '</a></li>';
                        } else {
                            pageHtml += '<li><a href="#" onclick="loadData(' + i + ')">' + i + '</a></li>';
                        }
                    }
                    $('.pagination').html(pageHtml);
                }
            });
        }

        $(function () {
            loadData(1);
        });
    </script>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<ul class="pagination">

</ul>
</body>
</html>

步骤5：运行程序

将上述代码保存，并在浏览器中运行HTML页面，即可看到无刷新分页功能的效果。

示例2：在PHP+Ajax的分页功能中添加搜索和排序功能

在示例1的基础上，我们可以进一步添加搜索和排序功能。

步骤1：添加搜索功能

要添加搜索功能，我们需要向HTML页面中添加一个搜索框，并在Ajax请求中添加一个名为“keyword”的参数。接着修改PHP中的查询语句，将SELECT子句修改为“SELECT * FROM users WHERE name LIKE '%".$keyword."%'”即可实现搜索功能。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>无刷新分页</title>
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        function loadData(page, keyword) {
            $.ajax({
                url: 'data.php',
                type: 'get',
                dataType: 'json',
                data: {
                    page: page,
                    keyword: keyword
                },
                success: function (data) {
                    var html = '';
                    for (var i = 0; i < data.data.length; i++) {
                        html += '<tr>';
                        html += '<td>' + data.data[i].id + '</td>';
                        html += '<td>' + data.data[i].name + '</td>';
                        html += '<td>' + data.data[i].age + '</td>';
                        html += '</tr>';
                    }
                    $('table tbody').html(html);
                    var pageCount = data.pageCount;
                    var pageHtml = '';
                    for (var i = 1; i <= pageCount; i++) {
                        if (i === page) {
                            pageHtml += '<li class="active"><a href="#">' + i + '</a></li>';
                        } else {
                            pageHtml += '<li><a href="#" onclick="loadData(' + i + ', \'' + keyword + '\')">' + i + '</a></li>';
                        }
                    }
                    $('.pagination').html(pageHtml);
                }
            });
        }

        $(function () {
            loadData(1, '');
            $('#btnSearch').on('click', function () {
                loadData(1, $('#txtKeyword').val());
            });
        });
    </script>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<form>
    <label for="txtKeyword">关键字：</label>
    <input type="text" id="txtKeyword">
    <button type="button" id="btnSearch">搜索</button>
</form>
<ul class="pagination">

</ul>
</body>
</html>

步骤2：添加排序功能

添加排序功能需要向HTML页面中添加两个可点击的表头。接着在Ajax请求中添加一个名为“order”的参数，用于指定排序顺序。最后修改PHP中的查询语句，将ORDER BY子句修改为“ORDER BY $order DESC/ASC”即可实现排序功能。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>无刷新分页</title>
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        function loadData(page, keyword, order) {
            $.ajax({
                url: 'data.php',
                type: 'get',
                dataType: 'json',
                data: {
                    page: page,
                    keyword: keyword,
                    order: order
                },
                success: function (data) {
                    var html = '';
                    for (var i = 0; i < data.data.length; i++) {
                        html += '<tr>';
                        html += '<td>' + data.data[i].id + '</td>';
                        html += '<td>' + data.data[i].name + '</td>';
                        html += '<td>' + data.data[i].age + '</td>';
                        html += '</tr>';
                    }
                    $('table tbody').html(html);
                    var pageCount = data.pageCount;
                    var pageHtml = '';
                    for (var i = 1; i <= pageCount; i++) {
                        if (i === page) {
                            pageHtml += '<li class="active"><a href="#">' + i + '</a></li>';
                        } else {
                            pageHtml += '<li><a href="#" onclick="loadData(' + i + ', \'' + keyword + '\', \'' + order + '\')">' + i + '</a></li>';
                        }
                    }
                    $('.pagination').html(pageHtml);
                }
            });
        }

        $(function () {
            loadData(1, '', '');
            $('#btnSearch').on('click', function () {
                loadData(1, $('#txtKeyword').val(), '');
            });
            $('table thead th:first-child').on('click', function () {
                loadData(1, '', 'id');
            });
            $('table thead th:nth-child(2)').on('click', function () {
                loadData(1, '', 'name');
            });
            $('table thead th:nth-child(3)').on('click', function () {
                loadData(1, '', 'age');
            });
        });
    </script>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<form>
    <label for="txtKeyword">关键字：</label>
    <input type="text" id="txtKeyword">
    <button type="button" id="btnSearch">搜索</button>
</form>
<ul class="pagination">

</ul>
</body>
</html>

到此，我们就完成了在PHP+Ajax的分页功能中添加搜索和排序功能的攻略。

附demo源码下载：https://github.com/very-big-boss/php-ajax-pagination

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月16日
下一篇 2023年5月16日

相关文章

  • nodejs中关于mysql数据库的操作

    安装MySQL驱动 在Node.js中使用mysql模块可以很方便地操作MySQL数据库。首先你需要在项目中安装mysql模块，可以使用npm进行安装： npm install mysql –save 连接数据库 在使用mysql模块之前，需要先与MySQL数据库建立连接。以下是Node.js连接MySQL数据库的基本示例代码： const mysql =…

    MongoDB 2023年5月16日
    00

  • js读取并解析JSON类型数据的方法

    下面是”JS读取并解析JSON类型数据的方法”的完整攻略： 什么是JSON格式数据？ JSON(JavaScript Object Notation)是一种常用的数据交换格式，它基于JavaScript语法而创建。JSON格式的数据通常用于前后端之间的数据传输。 JSON数据的最外层是一个大括号{}，里面存放一系列键值对，键和值之间用冒号:分隔，键值对之间用…

    MongoDB 2023年5月16日
    00

  • Windows下MongoDb简单配置教程

    首先我们要明确一下，MongoDB是一种非关系型数据库，支持高性能、高可用性和可扩展性，比较适合存储大量的非结构化或半结构化数据，如文档、图像、音频、视频等。 下面我来详细讲解一下如何在Windows下进行MongoDB的简单配置： 步骤一：下载MongoDB 首先需要从MongoDB官网进行下载，地址如下：https://www.mongodb.com/d…

    MongoDB 2023年5月16日
    00

  • MongoDB创建集合步骤详解

    环境配置 在使用MongoDB之前，需要先完成相应的环境配置。首先需要安装MongoDB，安装过程可以参考官方文档。 安装完成后，需要启动MongoDB服务。在Windows系统中，可以通过进入MongoDB的安装路径，打开命令行工具，输入mongod命令即可启动服务。在Linux系统中，可以使用systemctl命令启动服务。 创建数据库 在MongoDB…

    MongoDB 2023年3月13日
    00

  • redis 交集、并集、差集的具体使用

    首先我们需要了解 Redis 中集合（Set）的概念。集合是 Redis 中重要的数据结构，与普通的集合有些差别。Redis 的集合是一种无序的、唯一的数据集合。在 Redis 中，集合元素必须唯一，不能重复。 Redis 通过内置的命令和数据结构支持集合的交集、并集和差集操作。 交集操作 交集操作可以获得多个集合的交集，也就是这些集合中都存在的元素。在 R…

    MongoDB 2023年5月16日
    00

  • 深入理解MongoDB分片的管理

    深入理解MongoDB分片的管理 MongoDB的分片是一个重要的数据库高可用性和性能优化策略。本文将详细介绍如何在MongoDB中进行分片管理。 步骤一：分片键的选择 在分片之前，必须选择一个分片键。这个键将会被用于分片的目的，可以是任何一个字段。MongoDB将会根据这个键将数据划分到不同的分片上。 sh.shardCollection("te…

    MongoDB 2023年5月16日
    00

  • Mongodb常见错误与解决方法小结(Mongodb中经常出现的错误)

    MongoDB常见错误与解决方法小结 常见错误类型 连接错误 连接 MongoDB 数据库时，可能会出现如下错误： MongoNetworkError: 表示在尝试连接到 MongoDB 服务器时遇到网络错误，例如：无法解析主机名、无法连接到服务器等。 MongoTimeoutError: 表示尝试连接到 MongoDB 服务器时，连接超时。 连接错误解决方…

    MongoDB 2023年5月16日
    00

  • Mongodb 启动命令mongod参数说明（中文翻译）

    针对你提出的问题，我来给出完整的Markdown格式文本，详细讲解Mongodb 启动命令mongod参数说明（中文翻译）的攻略。 Mongodb 启动命令mongod参数说明 Mongodb是一种非关系型数据库，用于存储非结构化数据，是开发中常用的数据库之一。在使用Mongodb创建和管理数据库的时候，我们需要使用命令行。mongod是启动Mongodb服…

    MongoDB 2023年5月16日
    00
合作推广
合作推广
分享本页
返回顶部