从可见和已过滤的DataTable行创建新的常规表

我有一个带分页，过滤和ColVis插件的DataTable（列可见性）。 通过按下按钮，我需要获取所有页面的可见和过滤数据 ，并使用此数据生成下面的新常规表（此数据没有数据表，寻呼机，…）。

我尝试使用oTable.rows({search:'applied'}).data()来获取行，但是它不是仅获取可见列的数据，而是获取隐藏的列。 无论如何我不知道如何生成新表。

这是一个演示

我怎么能这样做？

提前致谢

Answer 1

我的回答是基于@ davidkonrad的答案并进行了一些修改：

 $('button.print-bt').on('click', function() { var fvData = oTable.rows({ search:'applied', page: 'all' }).data(); $('#main_wrapper').append( '' + ''+ ''+ $.map(oTable.columns().visible(), function(colvisible, colindex){ return (colvisible) ? "" : null; }).join("") + ''+ ''+ '' + $.map(fvData, function(rowdata, rowindex){ return "" + $.map(oTable.columns().visible(), function(colvisible, colindex){ return (colvisible) ? "" : null; }).join("") + ""; }).join("") + '
" + $(oTable.column(colindex).header()).html() + "
" + $('
').text(rowdata[colindex]).html() + "
' ); }); 

我的答案可能不适用于具有对象作为数据源的表，并且可能需要修改使用rowdata[colindex]检索数据的位置。

我正在使用$('

').text(data).html()技巧来编码可能存在于数据中的HTML实体。

请参阅此JSFiddle进行演示。

Answer 2

oTable.rows({ search:'applied', visible:true }).data(); 无效。 请参阅rows() selector-modifier的文档。

为了获得过滤的可视行，您应该使用page: 'current' ，所以

 var fvData = oTable.rows({ search:'applied', page: 'current' }).data(); 

……会做的。 要从头创建一个全新的表，并插入上面过滤的可见行，您可以将其添加到您的点击处理程序：

 $('#main_wrapper').append(''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ '
Column 1
Column 2
Column 3
Column 4 (hidden)
'); var newTable = $("#newTable").DataTable(); for (var i=0;i 

分叉小提琴 - > https://jsfiddle.net/sdz1n1gk/