Reputation: 43
I am using dataTable
plugin to display my table in jsp. I want to use check box option with it too. Something like here
DataTables: filter rows based on value in column
In this case the values of Types is not hidden. But in my table the value of first column is hidden. How to write JavaScript in that case.
My datatable looks like this:
var userTable = $("#users").dataTable({
"sPaginationType": "full_numbers",
"bPaginate": true,
"bScrollCollapse": true,
"iDisplayLength": 10,
"bFilter": false,
"bJQueryUI": true,
"aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }],
});
I am able to use the solution given in the link only when the column values are not hidden.
function Clear() {
$('#users tr').show();}function Search(word) {
Clear();
$('#users tr > td:first-child').each(function () {
if ($(this).html() != word) {
$(this).parent().hide();
}
});
}
My labels look like this:
<label>
<input type="radio" name="RadioGroup1" value="radio1" id="radio1" onclick="Search('1')"/>
Enabled</label>
<label>
<input type="radio" name="RadioGroup1" value="radio2" id="radio2" onclick="Search('0')"/>
Disabled</label>
<label>
<input type="radio" name="RadioGroup1" value="radio3" id="radio3" onclick="Clear()"/>
All</label>
Upvotes: 4
Views: 7053
Reputation: 3265
You can use the afnFiltering functionality of datatables
$.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) {
var $radio = $("input[name='RadioGroup1']:checked").val();
// show everything
if ($radio == "all")
return true;
else // Filter column 1 where matches RadioGroup1.value
return aData[0] == $radio;
});
http://jsfiddle.net/np8875Lm/1/
Upvotes: 4