TableSorter:如何将结果导出到csv?

Ted*_*d22 3 tablesorter

TableSorter是一个很棒的jquery脚本,用于对具有许多选项的html表进行排序.

但我不知道如何添加一个简单的'导出到csv'按钮(或链接)来获取包含我的表记录的文件(没有特殊的格式).

我知道输出插件但对我来说似乎太复杂了.

感谢您的帮助!

摊晒

Mot*_*tie 6

它实际上并不复杂,因为所有的选择,它看起来只是令人生畏.所述输出部件可输出CSV,TSV,任何其他分离的(空间,分号等)的值,JavaScript数组或JSON.

如果您只是使用基本功能,默认设置将:

  • 将csv输出到弹出窗口
  • 仅包括最后一个标题行
  • 仅包含已过滤的行(如果甚至未使用过滤器小部件,则为所有行)
  • 只会输出表格单元格文本(忽略HTML)

您只需要这段代码(演示):

HTML

<button class="download">Get CSV</button>
<table class="tablesorter">
    ....
</table>
Run Code Online (Sandbox Code Playgroud)

脚本

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

    $('.download').click(function(){
        $table.trigger('outputTable');
    });

    $table.tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'output']
    });
});
Run Code Online (Sandbox Code Playgroud)

我创建了另一个演示,显示所有选项,带有一组单选按钮,允许用户在将输出发送到弹出窗口或下载文件之间进行选择.

HTML

<label><input data-delivery="p" name="delivery" type="radio" checked /> popup</label>
<label><input data-delivery="d" name="delivery" type="radio" /> download</label>
<button class="download">Get CSV</button>
Run Code Online (Sandbox Code Playgroud)

脚本

var $table = $('table');

$('.download').click(function(){
    // get delivery type
    var delivery = $('input[name=delivery]:checked').attr('data-delivery');
    $table.data('tablesorter').widgetOptions.output_delivery = delivery;        
    $table.trigger('outputTable');
});
Run Code Online (Sandbox Code Playgroud)

因此,您可以根据需要将其设置为简单或复杂(请参阅实际的输出窗口小部件演示,该演示允许用户设置几乎所有选项).