时间戳

首页 > 解决方案 > 数据表问题将数据渲染到输入中

javascript - 数据表问题将数据渲染到输入中

问题描述

我目前正在使用 Datatables 维护一些项目：

我发现导出成功显示在页面上的列在使用渲染后无法显示时出现问题，如下所示：

this._dataTable = this.$mainTable.DataTable({
  ajax: {
    url: this.url,
    dataSrc: ''
  },
  dom: 'Bfrtip',
  fixedColumns: {
    leftColumns: 3,
    rightColumns: 1
  },
  orderable: false,
  rowId: 'fsId',
  scrollX: true,
  scrollCollapse: true,
  columns: [{
      className: 'input-cell',
      data: 'stadate',
      render(data) {
        const time = data ? moment(data).format('HH:mm DD-MM-YYYY') : '';

        return time;
      },
      width: '100px'
    },

    {
      className: 'input-cell',
      data: 'slotTime',
      render(data) {
        const time = data ? moment(data).format('HH:mm') : '';

        return `<input name="slotTime" class="form-control" data-time value="${time}" size="5" readonly>`;
      },
      width: '72px'
    },
  ],
  buttons: [{
    extend: 'print',
    customize: function(win) {
      $(win.document.body).find('table')
        .addClass('compact')
        .css('font-size', 'inherit');
    }
  }]
});

列中的数据stadate可以在网页和导出页面上成功显示，但数据slotTime只能在网页上成功显示。

感谢任何解决它的解决方案..问候

标签： javascriptjquerydatatables

解决方案

最后，我可以从这里Datatables - Export values inside and outside the field input 和 value of the select field找到解决方案，这里是我的最终代码：

this._dataTable = this.$mainTable.DataTable({

ajax：{ url：this.url，dataSrc：''}，dom：'Bfrtip'，fixedColumns：{leftColumns：3，rightColumns：1}，orderable：false，rowId：'fsId'，scrollX：true，scrollCollapse：true ，列：[{ className：'input-cell'，data：'stadate'，render（data）{const time = data？时刻（数据）.format（'HH：mm DD-MM-YYYY'）：''；

    return time;
  },
  width: '100px'
},

{
  className: 'input-cell',
  data: 'slotTime',
  render: function (data, type, row) {
const time = data ? moment(data).format('HH:mm') : '';

return type === 'export' ? time : `<input name="slotTime" class="form-control" data-time value="${time}" size="5" readonly>`;
  },
  width: '72px'
},

]，按钮：[{ 扩展：'print'，exportOptions：{正交：'export'，}，

}] });

谢谢大家

推荐阅读