DataTables + PHP/AJAX - 在显示之前操作结果

Posted 2023-05-08

【中文标题】DataTables + PHP/AJAX - 在显示之前操作结果

【英文标题】：DataTables + PHP/AJAX - manipulate result before display

【发布时间】：2021-10-21 19:26:25

【问题描述】：

我通常不通过 AJAX 调用使用dataTables，而是运行 SQL 查询，然后将结果弹出到表中。为了学习，我想尝试一下 dataTable + AJAX，但是对于如何在表格中显示结果之前最好地操作我的结果有点困惑。

以下场景：

我有一个包含用户列表的表格，并在第一列中显示用户的头像。头像图像保存在assets/img/avatars/ 中，命名约定遵循数据库中的用户id 编号（例如avatar_<user_id>.jpg）。

不过，在显示图像之前，我想检查图像是否确实存在，如果不存在，请改用默认占位符图像（例如avatar_00.jpg）。

通常我会运行我的 mysql 查询并添加一个 php if 检查以确定哪些图像进入该列。我如何使用 AJAX 做到这一点？在结果数组返回之前，我应该直接在 javascript 中还是在 fetch_data.php 中进行数据操作？

我的工作示例代码如下：

编辑： 长话短说：如何检查 AJAX 中是否存在头像图像并确保占位符显示在不存在文件的 DataTables 中？

HTML 表格：

<table id="global_address_book" name="global_address_book" class="table table-hover table-primary align-middle">
    <thead class="primary">
        <tr class="primary">
            <th scope="col">Avatar</th>
            <th scope="col">Name</th>
            <th scope="col">Department</th>
            <th scope="col">Region</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
</table>

JavaScript：

<script type="text/javascript">
    $(document).ready(function() 
        $('#global_address_book').dataTable(
            "processing": true,
            "ajax": "fetch_data.php",
            "columns": [
                    data: 'id',
                    render: function(data, type, row) 
                        return '<div class="sidebar-comment-avatar"><a href="#"><img src="../../assets/img/misc/small/avatar/avatar-' + row.id + '.jpg"></a></div>';
                    
                ,
                
                    data: 'first',
                    render: function(data, type, row) 
                        return '<h5>' + row.first + ' ' + row.last + ' - ' + row.position + '<br><small><u>' + row.property + ' (' + row.property_code + ')</u> - ' + row.city + ', ' + row.country + '<br>Email: <a href="#">' + row.email + '</a> - Phone: ' + row.phone + '</small></h5>';

                    
                ,
                
                    data: 'department',
                    render: function(data, type, row) 
                        return '<a href="#" class="btn btn-info btn-xs">' + row.department + '</a>';
                    
                ,
                
                    data: 'region',
                    render: function(data, type, row) 
                        return '<a href="#" class="btn btn-default btn-xs">' + row.region + '</a>';
                    
                ,
                
                    data: 'region',
                    render: function(data, type, row) 
                        return '<a href="#" style="font-size: 14px;">more details</a>';
                    
                
            ]
        );
    );
</script>

fetch_data.php

<?php
// db settings
$hostname = 'localhost';
$username = 'root';
$password = '';
$database = 'db_name';

// db connection
$con = mysqli_connect($hostname, $username, $password, $database) or die("Error " . mysqli_error($con));

// fetch records
$sql = "select id, first, last, phone, email, position, department, region, property_code, property, city, country from users2";
$result = mysqli_query($con, $sql);

while($row = mysqli_fetch_assoc($result)) 
    $array[] = $row;


$dataset = array(
    "echo" => 1,
    "totalrecords" => count($array),
    "totaldisplayrecords" => count($array),
    "data" => $array
);

echo json_encode($dataset);

【问题讨论】：

到目前为止你尝试过什么？你被困在哪里了？如果返回的数据应该只显示存在的图像，请在返回之前处理数据。如果您想使用 JS 进行检查（这要困难得多，因为您必须先请求所有图像才能查看哪些 URL 会引发 404），请在此处进行

“我如何检查 AJAX 中是否存在头像图像” - 你不知道。这是你应该在服务器上的 PHP 代码中做的事情，而不是在 JS 代码中

【参考方案1】：

您不需要直接在 JavaScript 中操作数据。 您可以在 PHP 文件中返回纯 html，因为 DataTables 会将任何内容粘贴到 <td> 元素中。

最好在从 PHP 文件发送响应之前检查头像是否存在。 我假设您有一个包含所有用户的数据库。所以检查一下，如果不存在头像文件，请放置您的占位符 HTML/Image

【讨论】：

谢谢，这很有意义。在将其传递给 DataTables 之前，必须在 PHP 中破坏和操作数组。感谢您的帮助。