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

【问题标题】：Add style cell to DataTable from database将样式单元格从数据库添加到 DataTable
【发布时间】：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 我在您的帮助下解决了我的问题。我用我的实际代码更新我的问题

标签： jquery css datatables

【解决方案1】：

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

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

【讨论】：