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.
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments