jQuery Datatable filter hidden column by dropbox does not work - datatables

Question

http://live.datatables.net/wifezuru/2/edit
15th column is hidden and value is false/true. When select (left top corner) shipping status from there it must filter DataTable by true/false value of the 15th column. Table works fine but that filter is not working. I mean does not show anything.
Also I tested with
$('#zctb').DataTable().columns(9).search('Sheridan-Sept2022').draw();
it works fine but
$('#zctb').DataTable().columns(15).search('true').draw()
; does not show result.
$("#zctb").DataTable({
"responsive": true,
"bAutoWidth": true,
scrollX: true,
// execute callback when DataTable is completely initialiazed
"initComplete": function () {
// Select the column whose header we need replaced using its index(0 based)
this.api().column(2).every(function () {
var column = this;
// Put the HTML of the <select /> filter along with any default options
var select = $('<select class="form-control input-sm"><option value="">All</option></select>')
// remove all content from this column's header and
// append the above <select /> element HTML code into it
.appendTo($(column.header()).empty())
// execute callback when an option is selected in our <select /> filter
.on('change', function () {
// escape special characters for DataTable to perform search
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
// Perform the search with the <select /> filter value and re-render the DataTable
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
// fill the <select /> filter with unique values from the column's data
column.data().unique().sort().each(function (d, j) {
select.append("<option value='" + d + "'>" + d + "</option>");
});
});
this.api().column(9).every(function () {
var column = this;
// Put the HTML of the <select /> filter along with any default options
var select = $('<select class="form-control input-sm"><option value="">All</option></select>')
// remove all content from this column's header and
// append the above <select /> element HTML code into it
.appendTo($(column.header()).empty())
// execute callback when an option is selected in our <select /> filter
.on('change', function () {
// escape special characters for DataTable to perform search
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
console.log('folder val ' + val);
// Perform the search with the <select /> filter value and re-render the DataTable
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
// fill the <select /> filter with unique values from the column's data
column.data().unique().sort().each(function (d, j) {
select.append("<option value='" + d + "'>" + d + "</option>");
});
});
// this.api().column(8).every(function () {
// var column = this;
// // Put the HTML of the <select /> filter along with any default options
// var select = $('<select class="form-control input-sm" id="bannedFilter" onchange="FilterBannedPeople(this)"><option value="">All</option> <option value="true">shipped</option> <option value="false">unshipped</option> </select>')
// // remove all content from this column's header and
// // append the above <select /> element HTML code into it
// .appendTo($(column.header()).empty())
// // execute callback when an option is selected in our <select /> filter
// .on('change', function () {
// // escape special characters for DataTable to perform search
// var val = $.fn.dataTable.util.escapeRegex(
// $(this).val()
// );
//
// // Perform the search with the <select /> filter value and re-render the DataTable
//
// column
// .search(val ? '^' + val + '$' : '', true, false)
// .draw();
// });
// // fill the <select /> filter with unique values from the column's data
// column.data().unique().sort().each(function (d, j) {
// select.append("<option value='" + d + "'>" + d + "</option>")
// });
// });
},
// disable sorting on the column with the filter in its header.
"columnDefs": [
{
"targets": 15,
//if searchable enabled, FilterBannedPeople won't work
//if searchable disabled, global search will search hidden column
"searchable": false
}
]
});
$.fn.dataTable.tables({visible: true, api: true}).columns.adjust();
$.fn.dataTable.ext.search.push(
function (settings, searchData, index, rowData, counter) {
var searchVal = $('#bannedFilter').val();
// Show all rows if select is emptry - 'all'
if (searchVal === '') {
return true;
}
// Show only rows that match the select value
if (searchVal === rowData[15]) {
return true;
}
// Filter row if it doesn't match.
return false;
}
);
function FilterBannedPeople(bannedFilterDropDown) {
var datatableObj = $('#zctb').DataTable();
var searchVal = $(bannedFilterDropDown).val();
var colIndex = 15;
console.log(datatableObj.columns(colIndex).search(searchVal).draw());
datatableObj.columns(colIndex).search(searchVal).draw();
}
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<div class="panel panel-default">
<select class="form-control input-sm" id="bannedFilter" onchange="FilterBannedPeople(this)">
<option value="">All</option>
<option value="true">shipped</option>
<option value="false">unshipped</option>
</select>
<div class="panel-body">
<div id="zctb_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer"><div class="row"><div class="col-sm-6"><div class="dataTables_length" id="zctb_length"><label>Show <select name="zctb_length" aria-controls="zctb" class="form-control input-sm"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> entries</label></div></div><div class="col-sm-6"><div id="zctb_filter" class="dataTables_filter"><label>Search:<input type="search" class="form-control input-sm" placeholder="" aria-controls="zctb"></label></div></div></div><div class="row"><div class="col-sm-12"><div class="dataTables_scroll"><div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px; width: 100%;"><div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 1915px; padding-right: 0px;"><table class="display table table-striped table-bordered table-hover dataTable no-footer" cellspacing="0" width="100%" role="grid" style="margin-left: 0px; width: 1915px;"><thead>
<tr role="row"><th rowspan="1" colspan="1">#</th><th rowspan="1" colspan="1">Customer Name</th><th rowspan="1" colspan="1">User</th><th rowspan="1" colspan="1">Tiny URL</th><th rowspan="1" colspan="1">Full URL</th><th rowspan="1" colspan="1">SO</th><th rowspan="1" colspan="1">WO</th><th rowspan="1" colspan="1">PO</th><th rowspan="1" colspan="1">Shipped?</th><th rowspan="1" colspan="1">Folder</th><th rowspan="1" colspan="1">Scan Count</th><th rowspan="1" colspan="1">Download</th><th rowspan="1" colspan="1">QR Image</th><th rowspan="1" colspan="1">Created Date</th><th rowspan="1" colspan="1">Action</th><th rowspan="1" colspan="1">Action</th></tr>
<tr role="row"><td class="sorting_asc" tabindex="0" aria-controls="zctb" rowspan="1" colspan="1" style="width: 0px;" aria-label=": activate to sort column descending" aria-sort="ascending"></td><td class="sorting" tabindex="0" aria-controls="zctb" rowspan="1" colspan="1" style="width: 39px;" aria-label=": activate to sort column ascending"></td><td class="sorting" tabindex="0" aria-controls="zctb" rowspan="1" colspan="1" style="width: 200px;" aria-label=": activate to sort column ascending"><select class="form-control input-sm"><option value="">All</option><option value="hello1#gmail.com">hello1#gmail.com</option><option value="hello#gmail.com">hello#gmail.com</option></select></td><td class="sorting" tabindex="0" aria-controls="zctb" rowspan="1" colspan="1" style="width: 16px;" aria-label=": activate to sort column ascending"></td><td class="sorting" tabindex="0" aria-controls="zctb" rowspan="1" colspan="1" style="width: 483px;" aria-label=": activate to sort column ascending"></td><td class="sorting" tabindex="0" aria-controls="zctb" rowspan="1" colspan="1" style="width: 27px;" aria-label=": activate to sort column ascending"></td><td class="sorting" tabindex="0" aria-controls="zctb" rowspan="1" colspan="1" style="width: 44px;" aria-label=": activate to sort column ascending"></td><td class="sorting" tabindex="0" aria-controls="zctb" rowspan="1" colspan="1" style="width: 72px;" aria-label=": activate to sort column ascending"></td><td class="sorting" tabindex="0" aria-controls="zctb" rowspan="1" colspan="1" style="width: 36px;" aria-label=": activate to sort column ascending"></td><td class="sorting" tabindex="0" aria-controls="zctb" rowspan="1" colspan="1" style="width: 170px;" aria-label=": activate to sort column ascending"><select class="form-control input-sm"><option value="">All</option><option value="Office Resource-Boston">Office Resource-Boston</option><option value="Sheridan-Sept2022">Sheridan-Sept2022</option></select></td><td class="sorting" tabindex="0" aria-controls="zctb" rowspan="1" colspan="1" style="width: 15px;" aria-label=": activate to sort column ascending"></td><td class="sorting" tabindex="0" aria-controls="zctb" rowspan="1" colspan="1" style="width: 40px;" aria-label=": activate to sort column ascending"></td><td class="sorting" tabindex="0" aria-controls="zctb" rowspan="1" colspan="1" style="width: 78px;" aria-label=": activate to sort column ascending"></td><td class="sorting" tabindex="0" aria-controls="zctb" rowspan="1" colspan="1" style="width: 32px;" aria-label=": activate to sort column ascending"></td><td class="sorting" tabindex="0" aria-controls="zctb" rowspan="1" colspan="1" style="width: 19px;" aria-label=": activate to sort column ascending"></td><td class="sorting" tabindex="0" aria-controls="zctb" rowspan="1" colspan="1" style="width: 19px;" aria-label=": activate to sort column ascending"></td></tr>
</thead></table></div></div><div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%;"><table id="zctb" class="display table table-striped table-bordered table-hover dataTable no-footer" cellspacing="0" width="100%" role="grid" aria-describedby="zctb_info" style="width: 100%;"><thead>
<tr role="row" style="height: 0px;"><th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 22px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">#</div></th><th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 61px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Customer Name</div></th><th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 222px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">User</div></th><th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 38px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Tiny URL</div></th><th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 505px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Full URL</div></th><th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 49px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">SO</div></th><th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 66px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">WO</div></th><th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 94px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">PO</div></th><th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 58px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Shipped?</div></th><th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 192px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Folder</div></th><th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 37px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Scan Count</div></th><th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 62px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Download</div></th><th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 100px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">QR Image</div></th><th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 54px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Created Date</div></th><th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 41px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Action</div></th><th rowspan="1" colspan="1" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 41px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Action</div></th></tr>
<tr role="row" style="height: 0px;"><td class="sorting_asc" aria-controls="zctb" rowspan="1" colspan="1" style="width: 0px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label=": activate to sort column descending" aria-sort="ascending"><div class="dataTables_sizing" style="height:0;overflow:hidden;"></div></td><td class="sorting" aria-controls="zctb" rowspan="1" colspan="1" style="width: 39px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label=": activate to sort column ascending"><div class="dataTables_sizing" style="height:0;overflow:hidden;"></div></td><td class="sorting" aria-controls="zctb" rowspan="1" colspan="1" style="width: 200px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label=": activate to sort column ascending"><div class="dataTables_sizing" style="height:0;overflow:hidden;"><select class="form-control input-sm"><option value="">All</option><option value="hello1#gmail.com">hello1#gmail.com</option><option value="hello#gmail.com">hello#gmail.com</option></select></div></td><td class="sorting" aria-controls="zctb" rowspan="1" colspan="1" style="width: 16px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label=": activate to sort column ascending"><div class="dataTables_sizing" style="height:0;overflow:hidden;"></div></td><td class="sorting" aria-controls="zctb" rowspan="1" colspan="1" style="width: 483px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label=": activate to sort column ascending"><div class="dataTables_sizing" style="height:0;overflow:hidden;"></div></td><td class="sorting" aria-controls="zctb" rowspan="1" colspan="1" style="width: 27px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label=": activate to sort column ascending"><div class="dataTables_sizing" style="height:0;overflow:hidden;"></div></td><td class="sorting" aria-controls="zctb" rowspan="1" colspan="1" style="width: 44px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label=": activate to sort column ascending"><div class="dataTables_sizing" style="height:0;overflow:hidden;"></div></td><td class="sorting" aria-controls="zctb" rowspan="1" colspan="1" style="width: 72px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label=": activate to sort column ascending"><div class="dataTables_sizing" style="height:0;overflow:hidden;"></div></td><td class="sorting" aria-controls="zctb" rowspan="1" colspan="1" style="width: 36px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label=": activate to sort column ascending"><div class="dataTables_sizing" style="height:0;overflow:hidden;"></div></td><td class="sorting" aria-controls="zctb" rowspan="1" colspan="1" style="width: 170px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label=": activate to sort column ascending"><div class="dataTables_sizing" style="height:0;overflow:hidden;"><select class="form-control input-sm"><option value="">All</option><option value="Office Resource-Boston">Office Resource-Boston</option><option value="Sheridan-Sept2022">Sheridan-Sept2022</option></select></div></td><td class="sorting" aria-controls="zctb" rowspan="1" colspan="1" style="width: 15px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label=": activate to sort column ascending"><div class="dataTables_sizing" style="height:0;overflow:hidden;"></div></td><td class="sorting" aria-controls="zctb" rowspan="1" colspan="1" style="width: 40px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label=": activate to sort column ascending"><div class="dataTables_sizing" style="height:0;overflow:hidden;"></div></td><td class="sorting" aria-controls="zctb" rowspan="1" colspan="1" style="width: 78px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label=": activate to sort column ascending"><div class="dataTables_sizing" style="height:0;overflow:hidden;"></div></td><td class="sorting" aria-controls="zctb" rowspan="1" colspan="1" style="width: 32px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label=": activate to sort column ascending"><div class="dataTables_sizing" style="height:0;overflow:hidden;"></div></td><td class="sorting" aria-controls="zctb" rowspan="1" colspan="1" style="width: 19px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label=": activate to sort column ascending"><div class="dataTables_sizing" style="height:0;overflow:hidden;"></div></td><td class="sorting" aria-controls="zctb" rowspan="1" colspan="1" style="width: 19px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label=": activate to sort column ascending"><div class="dataTables_sizing" style="height:0;overflow:hidden;"></div></td></tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">1</td>
<td>Sheridan</td>
<td>hello#gmail.com</td>
<td>17aca</td>
<td>dropbox</td>
<td>SO4564</td>
<td>wo345435</td>
<td>po345345</td>
<td>
<input type="checkbox" disabled="" class="call-checkbox" checked="" value="1">
</td>
<td>Sheridan-Sept2022</td>
<td>7</td>
<!-- <td><a id="download" href="-->
<!--"-->
<!-- download="-->
<!--">Download</a></td>-->
<td><a id="download" href="qr_images/SO4564-21.png" download="SO4564-21.png">Download</a>
<br>
</td>
<td><img src="qr_images/SO4564-21.png" width="100"></td>
<td>2022-09-19 15:56:16</td>
<td>
<i class="fa fa-pencil"></i>
<i class="fa fa-trash" style="color:red"></i>
</td>
<td>
true </td>
</tr><tr role="row" class="even">
<td class="sorting_1">2</td>
<td>Franklin Labs</td>
<td>hello1#gmail.com</td>
<td>0f354</td>
<td>dropbox2</td>
<td>SO6237</td>
<td></td>
<td>117-254-417375198864</td>
<td>
<input type="checkbox" value="0" class="call-checkbox" onclick="checkboxchecked(21)">
</td>
<td>Office Resource-Boston</td>
<td>4</td>
<!-- <td><a id="download" href="-->
<!--"-->
<!-- download="-->
<!--">Download</a></td>-->
<td><a id="download" href="qr_images/SO6237-20.png" download="SO6237-20.png">Download</a>
<br>
</td>
<td><img src="qr_images/SO6237-20.png" width="100"></td>
<td>2022-09-12 10:41:56</td>
<td>
<i class="fa fa-pencil"></i>
<i class="fa fa-trash" style="color:red"></i>
</td>
<td>
false </td>
</tr></tbody>
</table></div></div></div></div><div class="row"><div class="col-sm-5"><div class="dataTables_info" id="zctb_info" role="status" aria-live="polite">Showing 1 to 2 of 2 entries</div></div><div class="col-sm-7"><div class="dataTables_paginate paging_simple_numbers" id="zctb_paginate"><ul class="pagination"><li class="paginate_button previous disabled" id="zctb_previous">Previous</li><li class="paginate_button active">1</li><li class="paginate_button next disabled" id="zctb_next">Next</li></ul></div></div></div></div>
</div>
</div>
</body>
</html>