时间戳

首页 > 解决方案 > 导出 jQuery DataTable 时自定义数据

jquery - 导出 jQuery DataTable 时自定义数据

问题描述

我在 Laravel 中使用 jQuery DataTables，我想使用插件的导出功能。

现在我的问题是，在我的表格中，我有一些 HTML，因此我渲染了一个复选框，而不是实际的文本。

例子

<td>
    <span class="{{($r->submitted == 1)?'checkbox-checked':''}}">
        <i class="material-icons md-18">check_box</i>
    </span>
</td>

当我在 Excel 中导出这个表时，我得到了 td 'check_box' 的值，所以 excel 看起来像这样

+-----------+----------+-----------+-----------+--+
| Firstname | Lastname | Option 1  | Option 2  |  |
+-----------+----------+-----------+-----------+--+
| Christos  | Savva    | check_box | check_box |  |
+-----------+----------+-----------+-----------+--+
| Second    | Person   | check_box | check_box |  |
+-----------+----------+-----------+-----------+--+
| Third     | Person   | check_box | check_box |  |
+-----------+----------+-----------+-----------+--+

显然，这在 excel 文件中没有意义，而在屏幕上很好，因为我渲染了图标。

根据文档，我尝试使用Format output data - export options

var buttonCommon = {
    exportOptions: {
        format: {
            body: function ( data, row, column, node ) {
                //Do stuff to replace check_box with word Yes
                //or no
                return data
            }
        }
    }
};

问题来了。当我从函数返回数据时，它会返回 td 中的整个 html 块。

所以excel看起来像这样

+-----------+----------+---------------------------------------------------------------+---------------------------------------------------------------+--+
| Firstname | Lastname | Option 1                                                      | Option 2                                                      |  |
+-----------+----------+---------------------------------------------------------------+---------------------------------------------------------------+--+
| Christos  | Savva    | <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> | <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> |  |
|           |          |                                                               |                                                               |  |
|           |          | <i class="material-icons md-18">yes</i>                       | <i class="material-icons md-18">yes</i>                       |  |
|           |          |                                                               |                                                               |  |
|           |          | </span>                                                       | </span>                                                       |  |
+-----------+----------+---------------------------------------------------------------+---------------------------------------------------------------+--+
| Second    | Person   | <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> | <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> |  |
|           |          | <i class="material-icons md-18">yes</i>                       |                                                               |  |
|           |          | </span>                                                       | <i class="material-icons md-18">yes</i>                       |  |
|           |          |                                                               |                                                               |  |
|           |          |                                                               | </span>                                                       |  |
+-----------+----------+---------------------------------------------------------------+---------------------------------------------------------------+--+
| Third     | Person   | <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> | <span class="{{($r->submitted == 1)?'checkbox-checked':''}}"> |  |
|           |          |                                                               |                                                               |  |
|           |          | <i class="material-icons md-18">yes</i>                       | <i class="material-icons md-18">yes</i>                       |  |
|           |          |                                                               |                                                               |  |
|           |          | </span>                                                       | </span>                                                       |  |
+-----------+----------+---------------------------------------------------------------+---------------------------------------------------------------+--+

有谁知道我怎么能做到这一点？

标签： jquerydatatablesexport-to-excel

解决方案

如果我们可以假设 HTML 被渲染。即<span class="{{($r->submitted == 1)?'checkbox-checked':''}}">呈现为<span class="checkbox-checked">or <span class="">：

exportOptions: {
  format: {
    body: function ( data, row, column, node ) {
      if (![2,3].indexOf(column)) {
        return $('span', data).hasClass('checkbox-checked')
          ? 'yes'
          : 'no'
      }
      return data
    }
  }    
}

推荐阅读