Adding a search box for every column causes to sort the column too....
Adding a search box for every column causes to sort the column too....
Venky1995
Posts: 14Questions: 9Answers: 0
Hi All,
I have been working with DataTables for a while now. I am trying to implement the "Search Box" feature for every column in the generated table. The issue I am facing is that even If I am clicking on the Input text box to place the cursor and make a column specific search, the column sorts it self. I understand the fact that I am cloning the "thead" and then making the search, but is there anyway to be able to prevent the sorting and just perform search. Here is the code. Any help would be greatly appreciated. Thanks!
var table = $("#example2").DataTable();
$('#example2 thead tr').clone(true).appendTo('#example2 thead');
$('#example2 thead tr:eq(1) th').each(function(i) {
var title = $(this).text();
$(this).html('<input size="10" type="text" placeholder="Search ' + title + '" />');
$('input', this).on('keyup change', function() {
//console.log("Event in the INPUT");
e.preventDefault();
if (table.column(i).search() !== this.value) {
table
.column(i)
.search(this.value)
.draw();
}
$(this).attr("id", "someId");
});
});
This discussion has been closed.
Answers
Use the
orderCellsTopto move the sort functionality to the top header row.Kevin
Hey Kevin,
I have already tried it but that does not solve the problem unfortunately.... Here is the initialisation code for the table being created.....
```
$("#example2").DataTable({
"orderCellsTop": true,
"deferRender": true,
"autoWidth": false,
//"orderCellsTop": false,
"fixedHeader": true,
"pagingType": "full_numbers",
ajax: {
url: JSON URL,
dataSrc: 'features',
type: "GET"
},
"columns": [{
'data': 'properties.title'
}, {
'data': 'properties.author',
"render": function(data, type, row) {
return data.split("; ").join("<br/>");
}
}, {
'data': 'properties.year'
}, {
'data': 'properties.url'
}, {
'data': 'properties.appendices'
}, {
'data': 'properties.preprd_for'
}, {
'data': 'properties.keywords'
}, {
'data': 'properties.program'
}, {
'data': 'properties.taxa'
}],
"drawCallback": format2(),
columnDefs: [{
width: '15%',
targets: 0,
visible: true,
searchable: true
}, {
width: '15%',
targets: 1,
visible: true,
searchable: true
}, {
width: '5%',
targets: 2,
visible: true,
searchable: true
}, {
width: '5%',
targets: 3,
visible: true,
searchable: true
}, {
width: '10%',
targets: 4,
visible: true,
searchable: true
}, {
width: '10%',
targets: 8,
visible: false,
searchable: true
}],
initComplete: function() {
$("#example2 tbody tr:nth-child(odd)").css('background-color', '#eee !important');
$("#example2 tbody tr:nth-child(odd)").css('z-index', '99');
format2();
}
});
````
Looks like you may need to create the second header before you initialize Datatables. If you still need help please post a simple test case so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Hi Kevin,
Here is a link to the dataTable issue I was facing. More importantly this is an AJAX sourced data but I could not share then URL due to some policies. I used the same static data available. Thanks again for the great Library as well as your inputs on the problem I am facing..........
http://live.datatables.net/pikirusu/11/edit?html,css,js,console,output
Like I said you need to build the second header before initializing Datatables:
http://live.datatables.net/mumocapa/1/edit
Kevin
Just use event.stoppropogation() on input click