如何将jQuery DataTables整合到PHP+JavaScript服务端搜索项目中

需求说明 #

我是编程新手，经验有限。近期按照教程实现了一个基于PHP和JavaScript的服务端搜索表单，该表单运行正常，但希望改用jQuery DataTables来展示搜索结果，请演示如何将DataTables整合到现有代码中。

修改后的HTML代码 #

需要引入jQuery、DataTables的样式和脚本，同时将原有的结果展示容器替换为DataTables所需的表格结构：

<!DOCTYPE html>
<html>
<head>
    <title>搜索国家</title>
    <!-- 引入DataTables样式 -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
</head>
<body>
    <h1>国家列表</h1>

    <span id="msg"></span>

    <!-- 搜索表单 -->
    <form id="form-pesquisar">
        <label>搜索: </label>
        <input type="text" name="texto_pesquisar" placeholder="输入搜索关键词?"><br><br>

        <input type="submit" id="btn-pesquisar" value="搜索" name="Pesquisarpais"><br><br>
    </form>

    <!-- DataTables表格容器 -->
    <table id="paises-table" class="display" style="width:100%">
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>大洲</th>
                <th>地区</th>
                <th>面积</th>
                <th>独立年份</th>
                <th>人口</th>
                <th>预期寿命</th>
                <th>国民生产总值</th>
                <th>旧国民生产总值</th>
                <th>本地名称</th>
                <th>政府形式</th>
                <th>国家元首</th>
                <th>首都</th>
                <th>二位代码</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <!-- 引入jQuery和DataTables脚本 -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="js/custom.js"></script>
</body>
</html>

修改后的PHP代码 #

调整返回格式，不再拼接HTML，而是直接返回查询到的原始数据数组，方便DataTables解析：

<?php
// 引入数据库连接文件
include_once "./conexao.php";

// 获取前端提交的数据
$dados = filter_input_array(INPUT_POST, FILTER_DEFAULT);

// 当搜索关键词不为空时执行查询
if(!empty($dados['texto_pesquisar'])){
    // 构造模糊查询的关键词
    $name = "%" . $dados['texto_pesquisar'] . "%";
    
    // 查询SQL语句
    $query_paises = "SELECT Code, Name, Continent, Region, SurfaceArea, IndepYear, 
            Population, LifeExpectancy, GNP, GNPOld, LocalName, GovernmentForm, HeadOfState, Capital, Code2
            FROM country
            WHERE Name LIKE :nome";
    
    // 准备查询
    $result_paises = $conn->prepare($query_paises);
    // 绑定参数
    $result_paises->bindParam(':nome', $name);
    // 执行查询
    $result_paises->execute();
    
    if(($result_paises) && ($result_paises->rowCount() != 0)){
        // 获取所有查询结果
        $paises_data = $result_paises->fetchAll(PDO::FETCH_ASSOC);
        // 返回成功状态和数据
        $retorna = ['status' => true, 'dados' => $paises_data];
    }else{
        // 返回无结果提示
        $retorna = ['status' => false, 'msg' => "<p style='color: #f00;'>错误：未找到匹配的国家！</p>"];
    }
}else{
    // 无搜索关键词时的提示
    $retorna = ['status' => false, 'msg' => "<p style='color: #f00;'>错误：请输入搜索关键词！</p>"];
}

// 输出JSON格式的结果
echo json_encode($retorna);
?>

修改后的JavaScript代码 #

改用jQuery处理表单提交，并将返回的数据加载到DataTables中：

$(document).ready(function() {
    // 初始化DataTables（先创建空表格）
    var table = $('#paises-table').DataTable({
        columns: [
            { data: 'Code' },
            { data: 'Name' },
            { data: 'Continent' },
            { data: 'Region' },
            { data: 'SurfaceArea' },
            { data: 'IndepYear' },
            { data: 'Population' },
            { data: 'LifeExpectancy' },
            { data: 'GNP' },
            { data: 'GNPOld' },
            { data: 'LocalName' },
            { data: 'GovernmentForm' },
            { data: 'HeadOfState' },
            { data: 'Capital' },
            { data: 'Code2' }
        ],
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/zh-CN.json' // 中文语言包
        }
    });

    // 监听表单提交事件
    $('#form-pesquisar').on('submit', function(e) {
        e.preventDefault();
        
        // 修改按钮文本为搜索中
        $('#btn-pesquisar').val('搜索中...');

        // 获取表单数据
        var dadosForm = $(this).serialize();

        // 发送AJAX请求
        $.ajax({
            url: 'pesquisar.php',
            type: 'POST',
            data: dadosForm,
            dataType: 'json',
            success: function(resposta) {
                if(!resposta.status){
                    // 显示错误信息
                    $('#msg').html(resposta.msg);
                    // 清空表格数据
                    table.clear().draw();
                }else{
                    // 清空错误信息
                    $('#msg').html('');
                    // 更新表格数据
                    table.clear().rows.add(resposta.dados).draw();
                }
                // 恢复按钮文本
                $('#btn-pesquisar').val('搜索');
            },
            error: function() {
                $('#msg').html("<p style='color: #f00;'>请求失败，请稍后重试！</p>");
                $('#btn-pesquisar').val('搜索');
            }
        });
    });
});

内容的提问来源于stack exchange，提问作者Edgar Jose