从DataTable的可见和过滤行创建新的常规表 [英] Create a new regular table from visible and filtered rows of DataTable

问题描述

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

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

这是一个演示

我该怎么做？

提前感谢

解决方案

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

  $（'button.print- bt'）on（'click'，function（）{
 var fvData = oTable.rows（{search：'applied'，page：'all'}）data（）; 
 
 $（'＃main_wrapper'）。append（
'< table id =newTable>'+ 
'< thead>'+ 
'< tr> + 
 $ .map（oTable.columns（）。visible（），
 function（colvisible，colindex）{
 return（colvisible）？< th>+ $（oTable。列（colindex）.header（））。html（）+< / th>：null; 
}）。join（）+ 
'< / tr>'+ 
'< / thead>'+ 
'< tbody>'+ 
 $ .map（fvData，function（rowdata，rowindex）{
 return< tr>+ $ .map（oTable.columns（）。visible（），
 function（colvisible，colindex） {
 return（colvisible）？ < td> + $（'< div />'）。text（rowdata [colindex]）。html（）+< / td> ： 空值; 
}）。join（）+< / tr>; 
}）。join（）+ 
'< / tbody>< / table>'
）; 
}）; 
  

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

我使用 $（'< ; div />'）。text（data）.html（）对可能存在于数据中的HTML实体进行编码的技巧

请参阅此JSFiddle 进行演示。

I have a DataTable with paging, filtering and ColVis plugin (column visibility). By pressing a button, I need to get the visible and filtered data of all pages, and generate a new regular table below with this data (this one without datatables, pager, ...).

I tried with oTable.rows({search:'applied'}).data() to get the rows, but instead of getting only the data of the visible columns, it gets the hidden ones as well. And anyway I don't know how to generate the new table.

Here's a demo

How could I do this?

Thanks in advance

解决方案

My answer is based on @davidkonrad's answer with some modifications:

$('button.print-bt').on('click', function() {               
    var fvData = oTable.rows({ search:'applied', page: 'all' }).data(); 

    $('#main_wrapper').append(
       '<table id="newTable">' +
       '<thead>'+
       '<tr>'+
          $.map(oTable.columns().visible(),
              function(colvisible, colindex){
                 return (colvisible) ? "<th>" + $(oTable.column(colindex).header()).html() + "</th>" : null;
           }).join("") +
       '</tr>'+
       '</thead>'+
       '<tbody>' +
          $.map(fvData, function(rowdata, rowindex){
             return "<tr>" + $.map(oTable.columns().visible(),
                function(colvisible, colindex){
                   return (colvisible) ? "<td>" + $('<div/>').text(rowdata[colindex]).html() + "</td>" : null;
                }).join("") + "</tr>";
          }).join("") +
       '</tbody></table>'
    );
});

My answer may not work with a table having objects as data source and may need to be modified where data is retrieved with rowdata[colindex].

I'm using $('<div/>').text(data).html() trick to encode HTML entities that could be present in the data.

See this JSFiddle for demonstration.

这篇关于从DataTable的可见和过滤行创建新的常规表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！