[ datatable change cell value if filter criteria is not matching instead of hiding row ]
I need help. I am working with data table filter, here column filter hide rows if record not found and need is instead of hiding row display cell empty(with - value) where records are not following criteria. let me know if i can give you more details.
Answer 1
As you have not given any information about the structure of data you use to display the info, I have assumed the structure to be as the object data in the below code. The buttons in the html code change the criteria when ever clicked.
Hope it Helps!!
Edited for Datables
$(document).ready(function() {
var data = [
["name1", 24],
["name2", 54]
];
var crit = 0;
$("#crit1").click(function() {
crit = 20;
filter();
});
$("#crit2").click(function() {
crit = 40;
filter();
});
var table = $('#example').DataTable({
"data": data,
"columns": [{
title: "Name"
}, {
title: "Score"
}],
"columnDefs": [{
// The `data` parameter refers to the data for the cell (defined by the
// `data` option, which defaults to the column being worked with, in
// this case `data: 0`.
"render": function(data, type, row) {
if (data > crit)
return data;
else
return "-";
},
"targets": 1
}]
});
var filter = function() {
table.clear().draw();
table.rows.add(data); // Add new data
table.columns.adjust().draw();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet" />
<input type="button" id="crit1" value="20%" />
<input type="button" id="crit2" value="40%" />
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>Useful links:
https://www.datatables.net/examples/data_sources/js_array.html
https://www.datatables.net/examples/advanced_init/column_render.html
