如何在DataTables的Ajax配置中通过循环动态生成列数据配置

没问题，要实现用你的自定义数组$myObject->tableFields动态生成DataTables的列配置，我们可以借助PHP的服务器端处理能力，把数组转换成符合DataTables要求的JSON格式，直接注入到JavaScript代码里。具体步骤如下：

步骤1：在PHP中生成动态列配置数组 #

在你的PHP代码里（HTML生成结束后），添加这段代码来构建DataTables需要的列配置：

<?php
// 初始化DataTables列配置数组
$dtColumns = [];

// 先添加主键id列（对应你配置的$myObject->id）
$dtColumns[] = ["data" => $myObject->id];

// 循环遍历自定义字段数组，生成对应列配置
foreach ($myObject->tableFields as $field) {
    $dtColumns[] = ["data" => $field];
}

// 添加固定的操作列（编辑/删除按钮）
$dtColumns[] = [
    "defaultContent" => "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnEditar'><i class='material-icons'>edit</i></button><button class='btn btn-danger btn-sm btnBorrar'><i class='material-icons'>delete</i></button></div></div>"
];

// 将数组转为JSON字符串，方便JS直接使用
$dtColumnsJson = json_encode($dtColumns);
?>

步骤2：修改JavaScript中的DataTables配置 #

把原来静态的columns数组替换成我们生成的JSON变量：

<script>
$(document).ready(function() {
    var id, opcion;
    opcion = 4;
    $('#crudTable').DataTable({
        "language": {"url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"},
        "paging": true,
        "lengthChange": true,
        "searching": true,
        "info": true,
        "autoWidth": true,
        "scrollX": true,
        "ajax": {
            "url": 'main',
            "method": 'POST',
            "data": {opcion: opcion}
        },
        // 这里替换成动态生成的列配置
        "columns": <?php echo $dtColumnsJson; ?>,
    });
});
</script>

完整修改后的代码参考 #

这里是整合后的完整代码，你可以直接替换原来的代码：

<?php get_header_admin('Alex - AlexCRUDGenerator'); get_content_admin('Alex', 'AlexCRUDGenerator'); global $DB; ?>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<?php
class GenerateCrud {
    // Properties.
    public $tableName;
    public $id;
    public $tableFields = array();
    // Constructor.
    function __construct($tableName, $id, $tableFields){
        $this->tableName = $tableName;
        $this->id = $id;
        $this->tableFields = $tableFields;
    }
}
$myObject = new GenerateCrud('users_test', 'id', ['usuario', 'apellido1', 'apellido2', 'email']);
// Parse array to string.
$myStringArray = implode(",", $myObject->tableFields);
// 注意：这里要把id也加入查询，因为DataTables需要用到它
$sql = "SELECT {$myObject->id}, $myStringArray FROM $myObject->tableName";
$res = $DB->get_records($sql);

#################################### Generate HTML - START ####################################
$buttonModal = "<div class='container'><div class='row'><div class='col-lg-12'><button id='btnNuevo' type='button' class='btn btn-info' data-toggle='modal'><i class='material-icons'>library_add</i></button></div></div></div>";
$html = "<table id='crudTable' class='display' style='width:100%'>";
$html .= "<thead>";
$html .= '<tr>';
// 表头也要包含id
$html .= '<th>' . $myObject->id . '</th>';
foreach ($myObject->tableFields as $ths){
    $html .= '<th>' . $ths . '</th>';
}
// 表头添加操作列（可选，如果你需要显示的话）
$html .= '<th>操作</th>';
$html .= '</tr>';
$html .= "</thead>";
$html .= "<tbody>";
foreach ($res as $r){
    $html .= '<tr>';
    // 表格内容也要包含id
    $html .= '<td>' . $r->{$myObject->id} . '</td>';
    foreach($myObject->tableFields as $field){
        $html .= '<td>' . $r->$field . '</td>';
    }
    // 操作列内容
    $html .= '<td><div class="text-center"><div class="btn-group"><button class="btn btn-primary btn-sm btnEditar"><i class="material-icons">edit</i></button><button class="btn btn-danger btn-sm btnBorrar"><i class="material-icons">delete</i></button></div></div></td>';
    $html .= '</tr>';
}
$html .= "</tbody>";
$html .= '</table>';
#################################### Generate HTML - END ####################################

// 生成DataTables动态列配置
$dtColumns = [];
$dtColumns[] = ["data" => $myObject->id];
foreach ($myObject->tableFields as $field) {
    $dtColumns[] = ["data" => $field];
}
$dtColumns[] = [
    "defaultContent" => "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnEditar'><i class='material-icons'>edit</i></button><button class='btn btn-danger btn-sm btnBorrar'><i class='material-icons'>delete</i></button></div></div>"
];
$dtColumnsJson = json_encode($dtColumns);

echo $buttonModal . '<br>' . $html;
?>

<!-- #################################### JAVASCRIPT START #################################### -->
<script>
$(document).ready(function() {
    var id, opcion;
    opcion = 4;
    $('#crudTable').DataTable({
        "language": {"url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"},
        "paging": true,
        "lengthChange": true,
        "searching": true,
        "info": true,
        "autoWidth": true,
        "scrollX": true,
        "ajax": {
            "url": 'main',
            "method": 'POST',
            "data": {opcion: opcion}
        },
        "columns": <?php echo $dtColumnsJson; ?>,
    });
});
</script>
<!-- #################################### JAVASCRIPT END #################################### -->
<?php get_footer_admin(); ?>

注意事项 #

• 我修改了SQL查询语句，把id字段也加入了查询，因为DataTables的ajax请求需要用到这个字段（对应columns里的data: "id"）
• 同时更新了HTML表头和表格内容，加入了id列和操作列，保证前端显示和DataTables配置一致

内容的提问来源于stack exchange，提问作者Caín