数据表中具有单个变量 + defaultColumns 的列数组

Posted 2023-05-08

【中文标题】数据表中具有单个变量 + defaultColumns 的列数组

【英文标题】：Array of columns with a single variable + defaultColumns in Datatables

【发布时间】：2021-09-11 09:56:45

【问题描述】：

我正在尝试在我的数据表中创建动态 columns。

假设我想创建 4 列 + 默认列（2 个按钮）。好吧，我们将执行以下操作（可行）：

$('#tablaUsuarios').DataTable(
     "columns": [
          "data": "usuario",
          "data": "apellido1",
          "data": "apellido2",
          "data": "email",
          "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>"
      ],
);

现在假设我想做同样的事情，但只有一个值，如下所示：

var dataHeader = <?=$fields?>;

$('#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>"
      ],
);

dataHeader 包含以下内容：

0: data: "id", mData: "id"
1: data: "usuario", mData: "usuario"
2: data: "apellido1", mData: "apellido1"
3: data: "apellido2", mData: "apellido2"
4: data: "email", mData: "email"
length: 5
__proto__: Array(0)

（是我浏览器中 console.log 的复制粘贴，因为我需要信誉才能上传图片）。

正如大家所见，它具有相同的格式，但不显示 defaultColumns，我不知道为什么。我没有收到任何类型的错误。

有谁知道是否可以做这样的事情？

这是我的完整代码：

<?php

include_once(DIR_PLUGINS.'/alexcrudgenerator/main.php');

    $test = new GenerateCrud($_POST['tableName'], $_POST['id'], $_POST['tableFields']);

    switch($_POST['action'])
        
        case 'datosTabla':
            
            $res = json_decode($_POST['datos']);
            echo json_encode($res, JSON_UNESCAPED_UNICODE);
            
            break;

        case 'showtable':

            $res = getEntireTable($_POST['tableName'], $_POST['id'], $_POST['tableFields']);
            
            foreach ($res as $data)
                $resultados['data'][] = $data;
                       
            $resultados = json_encode($resultados);
            
            foreach(json_decode($_POST['tableFields']) as $columnsDB)
                $fields[] = array('data'=>$columnsDB);;
            
            $fields = json_encode($fields);
?>
            <div class="container caja">
                <div class="row">
                    <div class="col-lg-12 col-sm-12">
                        <div>
                            <table id="tablaUsuarios" class="table table-striped table-bordered table-condensed" style="width:100%" >
                                <thead class="text-center">
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                  </div>
            </div>

            <script>
            
                $(document).ready(function() 
                    var datos = '<?=$resultados?>';
                    var dataHeader = <?=$fields?>;
                    

                    console.log(dataHeader);
                    
                    $('#tablaUsuarios').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": '<?=SITE_URL_ADMIN?>/alexcrudgenerator/crud/res/',
                            "method": 'POST',
                            "data":action: "datosTabla", datos: datos
                        ,

                        "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: function() 
                            alert("Hello, successful!");
                        
                    );
                )
            </script>
<?php
        break;      

?>

另外，作为一个附加问题，我如何在我的 TH 中添加值？我的意思是，为每一列添加一个标题。

另外，作为一个附加问题，我如何在我的 TH 中添加值？我的意思是，为每一列添加一个标题。

我尝试在我的<thead></thead> 中添加<tr><td>Test 1</td></tr>，但什么也没...

提前谢谢你们，伙计们。

【参考方案1】：

出现问题是因为dataHeader 变量是一个数组，所以它实际上看起来是这样的：

var dataHeader = [
   "data": "id" ,
   "data": "usuario" ,
   "data": "apellido1" ,
   "data": "apellido2" ,
   "data": "email" 
];

---

旁注：我简化了您的变量，因为它似乎同时包含 data 和 mData 选项：

 data: "id", mData: "id" , ...

而它只需要包含data 选项：

 data: "id" , ...

mData 是 data 的旧名称 - 因此这些选项是等效的。

---

如果您将此数组添加到您的 DataTable 中，您最终会得到 columns 选项的以下结构：

"columns": [
  [
     "data": "id" ,
     "data": "usuario" ,
     "data": "apellido1" ,
     "data": "apellido2" ,
     "data": "email" 
  ],
  "defaultContent": "<div class='text-center'>...</div>"
],

这不是你想要的——你在columns 数组中有那个额外的数组。这对 DataTables 无效。

解决方案：

您可以通过将该 html 字符串添加到 PHP 提供的数组中来解决此问题：

var defaultContent =  defaultContent: "<div class='text-center'>...</div>" 

var dynamicColumns= <?=$fields?>;

dynamicColumns.push(defaultContent);

push() 函数将defaultContent 对象添加到dynamicColumns 数组的末尾。

现在您可以在 DataTable 中使用这个新变量 dynamicColumns：

$('#tablaUsuarios').DataTable(
  "columns": dynamicColumns
);