Footer search is not working when some of the footer column search is not required.
Footer search is not working when some of the footer column search is not required.
resur
Posts: 3Questions: 1Answers: 0
Hi,
I have 9 columns in my data table. i want to enable the footer search and top search to look for content only in the 3 columns as others are constant static text. Other 6 columns are not required for search. If i add footer search for other column which is not necessary for me it works for both top search and footer search. If i remove the footer search for the 6 columns, both top search and footer search doesn't work.
Uploaded the html file in https://ufile.io/ovavb
and pasted below as well.
<!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 />
<!--
Created using JS Bin
http://live.datatables.net
Copyright (c) 2017 by anonymous (http://live.datatables.net/hocihiso/1/edit)
Released under the MIT license: http://jsbin.mit-license.org
-->
<title>DataTables - JS Bin</title>
<style id="jsbin-css">
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>Date</th>
<th>Title</th>
<th>Minister</th>
<th>Watch</th>
<th>Listen</th>
<th>Mp3</th>
<th>PDF</th>
<th>CD</th>
<th>DVD</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Date</th>
<th>Title</th>
<th>Minister</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>2011</td>
<td>The Test1</td>
<td>Bro.Test1</td>
<td><a href="">Watch</a></td>
<td><a>Listen</a></td>
<td><a>Mp3</a></td>
<td><a>PDF</a></td>
<td>CD</td>
<td><a >DVD</a></td>
</tr>
<tr>
<td>2012</td>
<td>The Test2</td>
<td>Bro.Test2</td>
<td><a >Watch</a></td>
<td><a>Listen</a></td>
<td><a>Mp3</a></td>
<td><a>PDF</a></td>
<td><a>CD</a></td>
<td><a>DVD</a></td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable();
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
</script>
</body>
</html>
Please kindly help me on how to fix it
Thanks.
This discussion has been closed.
Answers
Does anybody have any solution to this problem?