Datatables动态columns拼接与表头标题设置问题咨询

问题1：动态列+操作列不显示的解决 #

错误原因 #

你现有写法存在两个语法错误：

• dataHeader本身已经是列配置数组，直接放入columns数组会生成二维数组，Datatables无法识别
• defaultContent配置被放到了columns的同级，没有被归入列配置项，自然不会生效

正确写法 #

两种方案二选一即可：

方案1：将操作列追加到动态列数组

var dataHeader = <?=$fields?>;
// 追加操作列配置
dataHeader.push({
    "defaultContent": "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnEditar' value='edit'><i class='material-icons'>edit</i></button><button class='btn btn-danger btn-sm btnBorrar'><i class='material-icons' value='delete'>delete</i></button></div></div>"
});

$('#tablaUsuarios').DataTable({
    // 其他配置不变
    "columns": dataHeader,
    // 其他配置不变
});

方案2：用展开运算符合并数组

$('#tablaUsuarios').DataTable({
    // 其他配置不变
    "columns": [
        ...dataHeader, // 展开动态列配置
        {
            "defaultContent": "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnEditar' value='edit'><i class='material-icons'>edit</i></button><button class='btn btn-danger btn-sm btnBorrar'><i class='material-icons' value='delete'>delete</i></button></div></div>"
        }
    ],
    // 其他配置不变
});

另外注意你现有代码中success是错误的顶层配置，要写回调请放入ajax配置项下。

问题2：设置表头TH的解决 #

两种方案二选一即可：

方案1：通过列配置自动生成表头 #

生成动态列配置时增加title属性，Datatables会自动渲染thead内容：
PHP端生成$fields时修改：

foreach(json_decode($_POST['tableFields']) as $columnsDB){
    $fields[] = array(
        'data'=>$columnsDB,
        'title'=> $columnsDB // 此处可替换为你要显示的表头文字，比如做字段名到中文的映射
    );
}

操作列也可以加表头，追加配置时增加title即可：

dataHeader.push({
    "title": "操作",
    "defaultContent": "..." // 原有内容不变
});

方案2：手动写thead代码 #

注意必须使用<th>标签，且表头数量和最终列数完全对应：

<table id="tablaUsuarios" class="table table-striped table-bordered table-condensed" style="width:100%" >
    <thead class="text-center">
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>姓氏1</th>
            <th>姓氏2</th>
            <th>邮箱</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

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