getting column filtering inputs to display at the top of the table
getting column filtering inputs to display at the top of the table
thisissean
Posts: 3Questions: 0Answers: 0
I'm using the individual column filtering as described on this page: http://www.datatables.net/examples/example_multi_filter.html
It's working well, except I'd like to display the inputs at the top of the table so that users don't have to scroll down to interact with these inputs. How can I do that?
I've tried:
* adding another row to the element, but DataTables throws an error on page load
* putting the elements withing the main elements, but that causes a problem because DataTables makes the whole element clickable for sorting purposes.
* using CSS to get the element to display at the top of the table, but I couldn't figure out how to do that or if it's even possible
I don't really care which shows up first, the column filter inputs, or the column headings... as long as they're both at the top I'll be happy.
It's working well, except I'd like to display the inputs at the top of the table so that users don't have to scroll down to interact with these inputs. How can I do that?
I've tried:
* adding another row to the element, but DataTables throws an error on page load
* putting the elements withing the main elements, but that causes a problem because DataTables makes the whole element clickable for sorting purposes.
* using CSS to get the element to display at the top of the table, but I couldn't figure out how to do that or if it's even possible
I don't really care which shows up first, the column filter inputs, or the column headings... as long as they're both at the top I'll be happy.
This discussion has been closed.
Replies
set up the table like:
one
two
...
basically what I was doing wrong was using instead of for the cells that contain the used for filtering.
That's very cunning! I hadn't actually thought of using TD elements in the header to do this. Nice one! Glad you got it sorted.
Allan
Like thisissean, I too agree that it's not nice to have to make users scroll to the bottom (or top) to interact with these filtering and sorting controls. Could you possibly consider making the table header static (not scroll). This would allow users to sort and filter (and see the messages) regardless of where they are located vertically in the table.
Thanks for listening.
The column filtering elements are controlled completely by the API, so their position can be customised as you wish. I put them into the footer of my demo table as this seemed appropriate, and the default table length is only 10 records. It certainly would represent a usability issue as it stands when put into a table and window will would require the end-user to scroll to get them.
One option is to do like thisissean has and put them into the header (you could have them both in the header and footer). Or you could float the elements on the page in a position:fixed div - the DataTables API makes no restrictions on where these elements are put - only that the required data is passed to the API function.
Regards,
Allan
it works great within the 'thead td' like the example from thisissean.
I´m having just a little problem with invisible columns at the 'thead td'.
When there are invisible columns, it seem´s they weren´t grouped with colspan.
Is it easy to fix this?
Actually I just wrote it directly into the td like and it works. Maybe there could be another way to detect hidden fields and do this automatically via javascript?
Regards
Achlan.
The 'thead td' also aren´t affected and still visible when the rest of the column is invisible.
maybe it´s just a little thing in the js file... or possibly an extension in the page script...
1. The reason that the TDs don't get hidden is that DataTables doesn't really consider them at the moment. It doesn't really expect TD elements in the THEAD - something I hope to address at some point. However, when you start to throw in colspan attributes, everything gets significantly more complex! It might only work by luck at the moment - I suspect that a fairly large plug-in might be required for colspan support...
2. I think that the explanation above applies to your second question equally. You might want to have a look at modifying the fnSetColumnVis() function to look for TD elements as well.
Regards,
Allan
I think, that (for me) it just makes sense to use the searchfields at the top, when there are no invisible columns at the initial datatable definition. The colspan isn´t a good resolution. It was just a try to fix the result.
It seems to be to much complicated for me and there would be a lot of parts have to be changed in the datatables.js. I´m not that fit in JS.
I´ll now try to modify fnSetColumnVis().
thank you for your support!
Regards,
Achlan.
Did you ever succeed in adding support for the extra TD elements? I had a go at it and was able to get the filter elements to hide but not to be added again. I threw away the tests when I upgraded to 1.6.1 but am willing to give it another go unless anybody has figured it out of course :) (Mine was quite a dirty hack, but I just need it to work, not to be pretty)
Cheers,
Huub
No, I've not really had a chance to look at that particular aspect yet. So if you do have an enhancement for it, it would be a most welcome addition.
Regards,
Allan
I have 4000 records and it takes 3 to 4 minutes to make this set of data visible in browswer. My stored procedure returns resultset instantly, then your API builds local collection and takes a lot of time.
Currently I am using Datatables for filtering.
Please help.
Rashid
Allan