How to put individual column filter inputs at top of columns?
How to put individual column filter inputs at top of columns?
MikeS
Posts: 113Questions: 1Answers: 0
I've tried to modify the column filter using text box inputs example to move the inputs to the top of the columns as seen here, http://jsfiddle.net/s8F9V/.
It works, but, the inputs now also trigger the column sorting when I click in them. The column header text no longer triggers the sort.
How can I have it such that the column header text triggers the sorting and have the text box input filter the content?
It works, but, the inputs now also trigger the column sorting when I click in them. The column header text no longer triggers the sort.
How can I have it such that the column header text triggers the sorting and have the text box input filter the content?
This discussion has been closed.
Replies
where stopPropagation is
[code]
function stopPropagation(evt) {
if (evt.stopPropagation !== undefined) {
evt.stopPropagation();
} else {
evt.cancelBubble = true;
}
}
[/code]
That's what I'm doing in my yadcf plugin http://yadcf-showcase.appspot.com/multiple_tables.html and it works just fine
Working fiddle: http://jsfiddle.net/s8F9V/1/
It's a bit better, however, when I click on the column header text (like "Name"), the column does not sort. I suspect that it needs just a little more tweaking :)
Are you able to see anything obvious in my jsfiddle example that would prevent version 1.10 beta 2 from having the column filter text boxes in the header?
I was hoping to have the input boxes at the top of the column (moved from your example where they are in the footers) and keep the header text as the trigger to sorting the column.
Is that not possible in this version?
Docs: http://next.datatables.net/reference/option/orderCellsTop
Allan
Allan
Try this:
"initComplete": function () {
var r = $('#MyDataTable tfoot tr');
// if you are using bootstrap, set the correct padding
r.find('th').each(function(){
$(this).css('padding', 8);
});
$('#MyDataTable thead').append(r);
},
Hi,
This works great for me except in one instance:
What happens is the column hides (like its suppose to), but the input and header stay visible.
Anyway to make the input disappear with the column when using ColVis?
It's dubious in terms of W3C standards but having a separate thead block for the filters also works in IE, Firefox and Chrome..... :-)
use this css in jquery.dataTables.css.......This is worked to put search boxes with header of table..... :) enjoye
tfoot {
display: table-header-group;
}
Heh - nice trick. I like it :-)
Thanks for sharing that with us.
Regards,
Allan
@allan, orderCellsTop thing works well, but when I use "scrollX": true, search is not happening
http://jsfiddle.net/s8F9V/26/
Just updated the below code in your fiddle
var table = $('#example').DataTable( {
"orderCellsTop": true ,
"scrollX": true,
} );
Have a look at this discussion: https://datatables.net/forums/discussion/24068 which deals with a similar issue, just in the footer.
Allan
Thanks allan, it was informative, but I am not able to reproduce it in my scenario for some reason. Can you give me an example for the fiddle I've given above ?
I just started learning js, so I might have missed something very obvious while trying it.
Easiest option is just to reorder the code and but the event handler before the DataTables initialisation: http://jsfiddle.net/s8F9V/27/ .
Allan
@allan, thanks a lot, its perfect ...
@allan, thanks. that really helped!!!