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

Community · Accepted Answer · 2017-05-23 12:06:32Z

2

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.

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered May 8, 2015 at 13:43

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

chimos Over a year ago

Nice! You both helped alot. Thank you

chimos Over a year ago

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.

Gyrocode.com Over a year ago

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.

chimos Over a year ago

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

chimos Over a year ago

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

|

davidkonrad · Accepted Answer · 2015-05-08 12:07:30Z

1

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/

answered May 8, 2015 at 12:07

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

7 Comments

Gyrocode.com Over a year ago

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

chimos Over a year ago

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

Gyrocode.com Over a year ago

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

chimos Over a year ago

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

Gyrocode.com Over a year ago

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

|

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related