Searchable columns - dataTables From https://datatables.net/forums/discussion/33182/individual-column-searching-with-statesave-not-showing-previous-values
$(document).ready(function () {
// Setup - add a text input to each footer cell
$('#example tfoot th').each(function () {
var title = $('#example thead th').eq($(this).index()).text();
if (title != "") {
$(this).html('<input type="text" style="font-style:italic;font-size:xx-small;color:lightgray;" placeholder="Search ' + title + '" />');
}
});
// DataTable
var table = $('#example').DataTable({
"order": [[1, "desc"]],
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"columnDefs": [{ "targets": 0, "orderable": false, "searching": false }],
"stateSave": true
});
// Restore state
var state = table.state.loaded();
if (state) {
table.columns().eq(0).each(function (colIdx) {
var colSearch = state.columns[colIdx].search;
if (colSearch.search) {
$('input', table.column(colIdx).footer()).val(colSearch.search);
}
});
table.draw();
}
// Apply the search
table.columns().eq(0).each(function (colIdx) {
$('input', table.column(colIdx).footer()).on('keyup change', function () {
table
.column(colIdx)
.search(this.value)
.draw();
});
});
});