将样式单元格从数据库添加到 DataTable

Posted 2023-05-09

【中文标题】将样式单元格从数据库添加到 DataTable

【英文标题】：Add style cell to DataTable from database

【发布时间】：2021-09-20 13:00:08

【问题描述】：

我正在尝试根据通话状态为我的单元格添加样式。

一个呼叫可以具有以下状态之一：

新 待定 已取消 确认 商业化

这种风格在 DB 的表格中的列中：

span_class 和 class 包含以下内容：

span_class: 徽章 bg-primary text-white 类：徽章bg-primary text-white

例如。

我想将此样式添加到我的数据表中的列状态中。

我认为我可以在 columns 中使用渲染来做到这一点，但我不知道该怎么做。

我的专栏是：

columns: [
   data: '', name: '' ,
   data: 'identi', name: 'identi' ,
   data: 'nombre', name: 'nombre' ,
   data: 'direccion', name: 'direccion' ,
   data: 'provincia', name: 'provincia' ,
   data: 'ciudad', name: 'ciudad' ,
   data: 'teleoperadora', name: 'teleoperadora' ,
   data: 'reasignar', name:'reasignar', 'render': function ( data, type, row ) 
      return "<select class='select_operator'><option>-- Seleccione --</option></select>";
  ,       
  ,
   data: 'estado', name: 'estado' ,
   data: 'estadoCita', name: 'estadoCita' ,
   data: 'fechaAsignacion', render: function (data, type, row) 
      return moment(new Date(data).toString()).format('DD-MM-YYYY HH:mm:ss');
   
  ,
   data: 'action', name: 'action', orderable: false, searchable: false ,
],

在“estado”（状态）中我需要添加类

更新

我正在尝试这个：

  data: 'estado',
  render: function(data, type, row) 
    return '<span class="' + data.clase + '">' + data.estado + '</span>';
  
,

更新

  data: 'estado',
  render: function(data, type, row) 
    return '<span class="' + row.class_span + " " + row.clase + '">' + row.estado + '</span>';
  
,

【问题讨论】：

这是一种方法：您已经在示例代码中使用了render 函数。您可以使用render 函数为您的estado 单元格创建跨度：return '<span class="' + YOUR_CLASS_NAME + '">' + data + '</span>';。我假设有一个从每个单元格中的 estado 值到您要使用的类名的简单映射。您可以在渲染函数中包含该逻辑。

如果您需要从数据库中获取类名，而不是在渲染函数中对它们进行硬编码，则必须在传递给 DataTable 的 JSON 数据中提供它们 - 这样可能也需要在您的代码中进行更改。

@andrewjames 感谢您的回复。我正在准备按您说的做，但我不知道该怎么做...返回未定义。更新了我的问题

好的 - 感谢您的更新。渲染函数中的 data 变量仅引用 estado 值 - 它不引用其他任何内容。您需要使用row 变量来访问该记录中的其他字段。例如，row.clase。但这假设您的 JSON 包含 clase 作为字段。如果它不在 JSON 中，这将不起作用。你能告诉我们你的 JSON 的原始文本吗？

感谢您的帮助@andrewjames 我在您的帮助下解决了我的问题。我用我的实际代码更新我的问题

【参考方案1】：

这解决了我的问题。我在控制器的查询中有一个JSON，并返回我需要的值css。在我将课程放入我的 td 之后：

 data: 'estado', render: function (data, type, row) 
                return '<span class="'+row.class_span+" "+row.clase +'">' + row.estado + '</span>';
                 
            ,