I have tables exactly as described in https://datatables.net/examples/api/multi_filter.html. My code structure is exactly the same (please see the full code and demo using the link).
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable();
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
Now I want to return all records (rows) in the table after performing the search operation, either through console.log()
or save the data in javascript array.
For example after I search Accountant in Position
column, I want to get the whole data stored in javascript array
[[Airi Satou,Accountant,Tokyo,33,2008/11/28,$162,700],
[Garrett Winters,Accountant,Tokyo,63,2011/07/25,$170,750]]
I have tried something like console.log( table.row( this ).data() );
but didn't work. How to achieve this?
Thanks to Paolo's answer, I got an insight of what should I do. My answer is the alternative to Paolo's answer. Instead of returning an array everytime I type on the search box, I add a submit button after applying filter to my table. So the returned array will be the same as the data shown on the table after filtering.
var table = $('#tableViewer').DataTable({
"pageLength": 5,
"lengthMenu": [[5, 50, 100, -1], [5, 50, 100, "All"]],
"dom": 'lfrtipB', // component position
buttons: [
{
text: 'Run',
action: function (e, dt, node, config) {
plainArray = table.rows({ search: 'applied' }).data().toArray();
for (var x = 0; x < plainArray.length; x++) {
console.log(plainArray[x]);
}
}
}
]
});