Unable to lookup only in first 3 columns
Unable to lookup only in first 3 columns
j_kathiresan
Posts: 14Questions: 4Answers: 0
There are 9 columns in the below data table and want to enable the footer search only for the first 3 columns.
If i remove the footer search for the 6 columns, both top search and footer search doesn't work.
<!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>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Does anyone have any suggestions?
First please don't duplicate posts - causes more work for those trying to help:
https://datatables.net/forums/discussion/43739/footer-search-is-not-working-when-some-of-the-footer-column-search-is-not-required#latest
My suggestion is to use
columnDefsto apply a className,column-searchfor example, to the 3 columns. Then changetable.columns().every( function () {totable.columns( '.column-search' ).every( function () {to enable the event handler for only those columns.Kevin
If i did that the footer search doesn't work. example i replaced as below
Did you apply the class name in your columnDefs, as Kevin explained?
I'm not sure how to apply the class name in the columnDefs. could you please help me with a sample snippet.
Reference > Options > Columns.
I don't understand. Can you modify the above html file and paste it? Thanks.
It isn't a HTML file, it's a menu option.
The documentation options are listed on the left-hand side of the page. Use them.
I'm still not able to understand. Below is the changed code but it doesn't work
You are searching for the class name '.column-search'
but you have applied the class name "first"
I recommend you spend more time with the documentation.
Tangerine, this got worked...Help me with the question -
https://datatables.net/forums/discussion/43769/file-export-options-and-data-is-not-getting-displayed#latest