从 DataTable 的可见行和筛选行创建一个新的常规 table

Question

我有一个带有分页、过滤和 ColVis 插件（列可见性）的 DataTable。通过按下一个按钮，我需要获取所有页面的可见和过滤数据，并用这些数据在下面生成一个新的常规table（这个没有数据tables, 寻呼机, ...).

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

Here's a demo

我该怎么做？

提前致谢

Answer 1

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

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

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

...就可以了。要从头开始创建一个全新的 table，并插入上面过滤的可见行，您可以将其添加到您的点击处理程序中：

$('#main_wrapper').append('<table id="newTable">'+
    '<thead>'+
       '<tr>'+
          '<th>Column 1</th>'+
          '<th>Column 2</th>'+
          '<th>Column 3</th>'+
          '<th>Column 4 (hidden)</th>'+
       '</tr>'+
     '</thead>'+
     '<tbody></tbody></table>');

var newTable = $("#newTable").DataTable();
for (var i=0;i<fvData.length;i++) {
    newTable.row.add(fvData[i]).draw();
}

分叉 fiddle -> https://jsfiddle.net/sdz1n1gk/

Answer 2

我的回答基于并做了一些修改：

$('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>'
    );
});

我的答案可能不适用于以对象作为数据源的 table，并且可能需要在使用 rowdata[colindex] 检索数据的地方进行修改。

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

请参阅 this JSFiddle 进行演示。

从 DataTable 的可见行和筛选行创建一个新的常规 table

Create a new regular table from visible and filtered rows of DataTable

html

javascript

jquery

jquery-datatables

datatables-1.10