将 tablesorter table 导出到 CSV 并替换特定列的内容

Question

正如标题所说，我在 HTML table 上使用 tablesorter，我还想添加下载整个 table 的功能CSV 文件。

我的问题是有些列不包含文本，而是包含图像或图标。例如，

<table class="tablesorter">
   <thead>
      <tr>
         <th>Col1</th>
         <th>Col2</th>
         <th><i class="icon-2" role="img" aria-label="ColIcon2" title="ColIcon2"></i></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>This is just a text</td>
         <td><a href="/blah" class="class1"><img src="/Img/Icons/image.gif" alt="title1" title="title1"></a></td>
         <td><i class="icon-1" role="img" aria-label="Icon1" title="Icon1"></i></td>
      </tr>
   </tbody>
   <tfoot>
      <tr >
         <td>
            <a href="#" class="download">Download as CSV</a>
         </td>
      </tr>
   </tfoot>
</table>

并像这样在 tablesorter 上使用常规的基本设置

$(function () {
    var $table = $('table');

    $('.download').click(function() {
        // tell the output widget do it's thing
        $table.trigger('outputTable');
    });

    $table.tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'output'],
        widgetOptions: {
             output_includeFooter: false
        },
    });
});

我不知道如何在有图标或图像的位置添加标题属性或自定义 data-attribute 我将添加到 HTML代码？

Answer 1

在 widgetOptions 中添加一个 output_formatContent 回调，returns 要包含在 CSV 中的文本：

output_formatContent : function( c, wo, data ) {
  // data.isHeader (boolean) = true if processing a header cell
  // data.$cell = jQuery object of the cell currently being processed
  // data.content = processed cell content (spaces trimmed, quotes added/replaced, etc)
  // data.columnIndex = column in which the cell is contained (added v2.30.5)
  // data.parsed = cell content parsed by the associated column parser (added v2.30.5)
  // **********
  // use data.$cell.html() to get the original cell content
  const label = data.$cell.find('img, i');
  return label.length ? label.attr('title') : data.content;
}

将 tablesorter table 导出到 CSV 并替换特定列的内容

Export tablesorter table to CSV and replace content of specific columns

jquery

tablesorter