Floating and dynamically resizing input fields above their respective columns

mrashkovsky

Is there a recommended solution for having input fields on a per-column basis, and having those filter fields stay above each column and resize dynamically with the columns? I've implemented something using jqueryui's position functionality ( http://jqueryui.com/position/ ) but just wondering if there are any other good solutions for this problem.

The test case would be when resizing the window, or paging through data that changes the widths of the columns, that the filter fields should resize their widths automatically. Also that when the page loads the filter fields position themselves right above each column.

allan

Can't you just put an element in the cell and set it to width:100%?

Allan

mrashkovsky

I would like to have htem them outside and above the table, like this: http://i.steppic.com/6/5/d/7/65d704af2eef1cc3157b779c9ab6a558/0.png

mrashkovsky

Although I guess I would also want to know if your advice to put an input in the cell refers to a thead cell or a tbody cell? I wouldn't mind having the filters as row1 within thead, with the table column names in row2 within thead. However when I tried that it broke because I'm using sScrollY which split the table into sort of two tables.

allan

Ah - I understand now. In which case, can you not just use jQuery to match the size of the input elements to the columns? Use a resize event handler to resize them when needed. It isn't something that DataTables nor its API will help with I'm afraid.

Allan

mrashkovsky

Yep that's basically what I've done.

$( window ).on( 'resize', function(){
// Position the input elements using jqueryui's position functionality
// Use jquery to match the size of the columns
});

It just seemed a little janky to do this so just wanted to check if there was something in the datatables API that I might have missed. Thanks a bunch for confirming for me, and thanks again for datatables which is a pleasure to use.

allan

Great to hear - thank you :-)

Allan

mrashkovsky

Just for posterity, below is my implementation if anyone's interested. Depends on jquery, and also underscore ( underscorejs.org ) though that can be easily eliminated by looping through filter_to_column_header_mappings in a more vanilla way. Hard dependency on jqueryui (jqueryui.com) for the position() function.


[code]
positionFilters: function(){

var filter_to_column_header_mappings = [

{
filter : 'input#birth_date',
header : 'th#birth_date'
},

{
filter : 'input#person_initials',
header : 'th#person-initials-head'
},

{
filter : 'input#fuser_id',
header : 'th#userid-head'
},

];

_.each( filter_to_column_header_mappings, function( mapping ){

$( mapping.filter ).css({

'width' : $( mapping.header ).outerWidth() - 20,
'margin' : '0'

});

$( mapping.filter ).position({

my: 'center bottom-6',
at: 'center top',
of: mapping.header,
collision: 'none'

});


});

}
[/code]