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

Question

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

Glume

Answer 1

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.

Children

Nice! You both helped alot. Thank you – Glume

Your answer says "I'm using $('<div/>').text(data).html() trick to encode HTML ..." but in some of my TDs there are SPANS that are not being encoded. I forked your demo to show the issue. – Glume

If you're using HTML in your cells, then get replace $('<div/>').text(rowdata[colindex]).html() with rowdata[colindex]. I need to experiment, maybe this conversion isn't necessary at all. – Children

Yes, replacing that worked like a charm. Thanks again! – Glume

I'm sorry I need so much attention. I have a test environment (local) where it works perfectly, but when I bring the same code to production, then every cell has the content of the entire row, repeated. Something like: <tr><td>cell1-data, cell2-data, cell3-data</td><td>cell1-data, cell2-data, cell3-data</td><td>cell1-data, cell2-data, cell3-data</td></tr> It looks that rowdata[colindex] is droping all cells of each row instead of one cell each time. Any idea? Thanks in advance – Glume

Ok, I found the problem. In my production environtment brackets "[...]", must be escaped, since they are used for placeholders. I replaced "[]" for "\{\}" and now is working as expected. Sorry for the inconvenience and thanks again. – Glume

Answer 2

oTable.rows({ search:'applied', visible:true }).data(); is not valid. See the docs for rows() selector-modifier.

In order to get filtered visual rows you should use page: 'current', so

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

...would do the trick. To create a completely new table from scratch, and insert the above filtered visible rows you could add this to your click handler :

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

forked fiddle -> https://jsfiddle.net/sdz1n1gk/

Jounce

This only extracts data on current page. It seems that original poster wanted visible and filtered data of all pages. – Children

Thanks for your answer. It was very helpful. But in the forked fiddle you provided is still needed NOT to show the hidden column. And actually it's not necessary to attach the new table to DataTable(), it can be a plain table. Also, I will be using page: 'all', since I need to see all the results without pager: New fork – Glume

This answer could be modified for DataTables 1.10 to filter out hidden columns. – Children

Thanks @Gyrocode.com. Could be something similar to var fvData = oTable.columns({ search:'applied', page: 'all' }).visible().data();? (no success yet) – Glume

@davidkonrad, since I based my answer on yours, if you update your answer, I will remove mine. – Children

@Gyrocode.com, its OK, have upvoted your answer even though I think you do a lot of unnessecary code. – Jounce

@chimos, I obviosly misunderstood the question. I thought you only wanted visible rows, you know - visible as the eye can see, as you wrote "the visible columns" - but glad to see you are helped out anyway. – Jounce