I have multiple HTML tables on my website, so I created a class called datatable to meet my generic table needs. For exports like PDF and Excel, I successfully excluded columns with the ignore class.
Now, I need to dynamically exclude columns with the ignore class while filtering. I want to easily set more columns with the ignore class to prevent them from being included in the filter. It's important to note that there won't always be buttons or anchor elements (button or a), so please avoid suggesting that I simply exclude these.
For example, if there is a row with the name Edit Valvasor, I want the filter to locate the row when typing "Edit" and disregard columns with Edit buttons.
An example of this can be seen here: http://jsfiddle.net/t1h9ugqa/
Javascript:
$(document).ready(function() {
$('.datatable').DataTable({
lengthMenu: [
[15, 25, 50, -1],
[15, 25, 50, "All"]
],
pageLength: 25,
dom: '<"html5buttons"B>lTfgitp',
aaSorting: [],
buttons: [{
extend: 'copy',
exportOptions: {
columns: ':not(.ignore)',
}
},
{
extend: 'csv',
exportOptions: {
columns: ':not(.ignore)',
}
},
{
extend: 'excel',
exportOptions: {
columns: ':not(.ignore)',
}
},
{
extend: 'pdf',
exportOptions: {
columns: ':not(.ignore)',
}
},
{
extend: 'print',
customize: function(win) {
$(win.document.body).addClass('white-bg');
$(win.document.body).css('font-size', '10px');
$(win.document.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
}
}
]
});
});
HTML:
<table class="datatable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Sum</th>
<th class="ignore"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Edit Valvasor</td>
<td>1034</td>
<td>
<a class="btn btn-primary" href="#">Edit</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Samuel Grixis</td>
<td>655</td>
<td>
<a class="btn btn-primary" href="#">Edit</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Martin Kempinsky</td>
<td>153</td>
<td>
<a class="btn btn-primary" href="#">Edit</a>
</td>
</tr>
</tbody>
</table>