Adding a search box for every column causes to sort the column too....

Venky1995

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");
            });
        });

kthorngren

Use the orderCellsTop to move the sort functionality to the top header row.

Kevin

Venky1995

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();
}
});
````

kthorngren

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

Venky1995

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

kthorngren

Like I said you need to build the second header before initializing Datatables:
http://live.datatables.net/mumocapa/1/edit

Kevin

umairahmed

Just use event.stoppropogation() on input click