ColReorder & Individual Column Filtering Positioned In Header
ColReorder & Individual Column Filtering Positioned In Header
![Restful Web Services](https://datatables.net/forums/uploads/userpics/010/nVJVTOQRXGXGT.jpg)
I know this has been asked before but I cant find a working solution at the moment. I am using a combination of ColReorder, horizontal scrolling and individual column filtering. I cant make the col reorder function work from the top THEAD row and the filtering work from the second THEAD row. Both functions only work if I leave bSortCellsTop
as false
. However, I need the col reordering to be in the first THEAD row as that is better from a usability point of view.
How I can target the second row in THEAD with this function?
table.columns().every( function () {
var that = this;
$( 'input', this.header() ).on( 'keyup change', function () {
if(that.search() !== this.value){
that
.search( this.value )
.draw();
}
});
});
Any help would be greatly appreciated.
Thanks
Chris
This question has an accepted answers - jump to answer
Answers
Hi Chris,
Probably the easiest way around this is going to be to put the inputs in a footer and then use:
to make the footer a header...
Having said that, using
orderCellsTop
should work. You'd need to use:to put the input elements into the second row (since
column().header()
will refer to the header cell DataTables uses.Allan
Hi Allan,
I had previously tried:
However, because I am using horizontal scrolling the
<tfoot>
element is put in its own<div>
element meaning that the CSS rule has no effect, that is my understanding anyway.I have also tried your second idea but that didn't work for me either, although I probably made a mistake on my side.
What has worked for me is to put a 'fake' thead search input bar in the header and simply pass the value entered to the footer search input. Like so:
Is that an okay-ish solution?
Thanks
Chris
Hi Allan,
Thanks for your answer. I did previously attempt the use of:
However, because I am also using horizontal scroll I believe that the
<tfoot>
element is not within the same<div>
as the<thead>
element and thus cannot be repositioned using CSS, that is my understanding anyway?I did try the second suggestion too but to no avail, although that was probably an error on my part.
What is working for me is quite a rudimentary solution whereby I introduce a 'fake' header input bar at the top and simply pass the values from the thead input to the tfoot input which then carries out the actual filtering.
It seems to work okay?
Chris
Ah yes, if you are using scrolling, that CSS hack isn't going to be useful - sorry.
Just looking at my code above again, it would actually select all
input
elements in the header - not on a per column basis!Should be a little better.
Allan
Hi Allan,
I have figured it out now. The problem as far as I understand was I have two columns at the start of my table which I exclude from having functionality like searching and ordering. Therefore my
this.index()
was always out by 2, i.e. it was 10 when it should have been 8. Secondly, I use the column visibility function to allow the user to show/hide columns, this also seems to affect the index value. So, I dynamically add an id to the thead input upon creation like this:Then I perform the search by introducing the
colIdx
value to the function and subtracting 2 from the value to take account of my non searchable columns at the start. I also use the.on()
event handler to deal with hidden columns otherwise the search only works on inputs that exist when the page loads which excludes initially hidden columns.Finally, I use stateSave so to restore the search values to the individual columns I do the same:
Is their a better way to solve this or does this seem reasonable?
Thanks
Chris
Yes, column visibility would do it, if you are selecting from the document directly, without using a DataTables API method (which in this case you have to since it doesn't provide an API to get the second row of cells in the header...!).
You can use
columns.index()
to convert between data index and visible index, which would save you having a "magic" 2 in your code, should you ever change the number of visible columns in future.Allan
Thanks