数据表日期时间提取分钟数并添加 CSS 类

Question

>Using Datatables v1.10

目前，我的表格在第二列中以这种格式显示日期17-04-2019 14:34。这是数据库返回的格式。一切都按预期工作，过滤和搜索。

HTML 表格单元格当前如下所示;

<td class="sorting_1">17-04-2019 14:34</td>

我想选择每个单元格中的分钟并在它们周围添加一个自定义 css 类，如下所示

<td class="sorting_1">17-04-2019 <span class="text-muted">14:34</span></td>

我的数据表代码如下;

$(document).ready(function() {
  $('#example').DataTable({
    "columns": [
      {
        data: 'date',
        "render": function(data, type, row) {
          return data;
          // console.log(data) displays a string 
          // in this format 17-04-2019 14:34
        },
      }
    ],
  });
});

我尝试过使用 JavaScript String split(( 方法，但无法让它工作。

任何帮助，不胜感激。

Answer 1

试试这个;

$(document).ready(function() {
  $('#example').DataTable({
    "columns": [
      {
        data: 'date',
        "render": function(data, type, row) {
          var array = row['datePaid'].split(" ");
          var date = array[0];
          var mins = array[1];
          data = date + ' ' + '<span class="text-muted">' + mins + '</span>';
          return data;
          // console.log(data) displays a string 
          // in this format 17-04-2019 14:34
        },
      }
    ],
  });
});

我相信有更有效的方法可以做到这一点，但它应该有效。

Answer 2

split()可以解决这个问题。然后，您可以在将第二个项目包装在 span 中后输出结果数组中的第二项，如下所示：

$(document).ready(function() {
  $('#example').DataTable({
    "columns": [{
      data: 'date',
      render: function(data, type, row) {
        var d = data.split(' ');
        return `${d[0]} <span class="text-muted">${d[1]}</span>`;
      },
    }],
  });
});

另一种选择是使用正则表达式：

render: function(data, type, row) {
  return data.replace(/^([d-]+)s([d:])+$/, '$1 <span class="text-muted">$2</span>')
},