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

i have datatable paging, filtering , colvis plugin (column visibility). pressing button, need visible , filtered data of pages, , generate new regular table below data (this 1 without datatables, pager, ...).

i tried otable.rows({search:'applied'}).data() rows, instead of getting data of visible columns, gets hidden ones well. , anyway don't know how generate new table.

here's demo

how this?

thanks in advance

my answer based on @davidkonrad's answer 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 table having objects data source , may need modified data retrieved rowdata[colindex].

i'm using $('<div/>').text(data).html() trick encode html entities present in data.

see this jsfiddle demonstration.