Filter in header and size of filter input

infoheights

Hi,

Pls refer http://www.infoheights.com/AOA/UserModule/indexmorecolumns.html

a) I had set the fnfilter in the thead. However, due to that my ColVis got affected since it shows labels from the header. It started showing the text boxes used for the filters as labels!! Pls let me know if there is a solution to this. I did try the fnlabel callback but it did not work

b) I need to know if i can customize the size of the text boxes which are used as filters in fnfilter. I mean, i am also using column resize so can these text boxes also adjust as the column is resized?

c) I am trying to reset sort to original using fnsortneutral but it doesnt seem to do what it is supposed to.

My code :

[code]
var oTable = $('#studenttable').dataTable({


"bJQueryUI":"true",
"sDom": 'z<"row-fluid"<"span4"C><"span4 lineitemcheckbox"><"span3"l>r><"row-fluid"<"span4 actiondropdown"><"span4"f><"span4 advsearch">><"row-fluid"<"span12 newrecordbutton">><"datatable-scroll"t><"row-fluid"<"span12"i><"span12 center"p>>',
"oColVis": {
"aiExclude": [ 0,1 ],
"sAlign": "left"

},
"sPaginationType": "bootstrap",
"bJQueryUI": true,

// Disable sorting on the first column
"aoColumnDefs" : [ {
'bSortable' : false,
'aTargets' : [ 0 ]
} ],

"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"sScrollX":"100%",
/* "sScrollXInner": "110%",*/
"sScrollY": ( 0.6 * $(window).height() ),
"bScrollCollapse": true,
"bAutoWidth":false




} );
//.fnDraw()
//.fnAdjustColumnSizing()

//oTable.fnAdjustColumnSizing();

var asInitVals = new Array();
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
//alert($("tfoot input").index(this));
//var i = $("tfoot input").index(this);

oTable.fnFilter( this.value, ($("tfoot input").index(this))+1 );

} );



/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer*/

$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );

$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
//oTable.fnAdjustColumnSizing();
/* setTimeout(function ()
{
oTable.fnAdjustColumnSizing();
}, 10 );*/
oTable.fnDraw();



$("div.advsearch").html('Advanced Search
');
$("div.actiondropdown").html('Actions   Option 1Option 2Option 3Option 4Option 5');
$("div.sortdropdown").html('Sort   IndividualSequentialOriginal');

$("div.lineitemcheckbox").html('Show Line Item Records   ');
$("div.newrecordbutton").html('  Create a new record

');



------------------------------------------------------------

Code for reset sort

//changes by anu to revert to original sort - alert is called but sort neutral does not happen
$('#resetsort').click( function() {
alert("came here");
var oTable = $('#studenttable').dataTable();
oTable.fnSortNeutral();
//oTable.fnSort([[0,'asc']]);
// redraw the datatable
oTable.fnDraw();

});
[/code]

allan

[code]
input, textarea {
width: 210px;
}
[/code]

that's where the width is coming from. bootstrap-cerulean.css - line 664.

Allan

infoheights

Thanks a ton, Allan. That allows me to change the size of the text box.

Would be nice if you can advise on a resize plugin that allows me to resize the filter input also as the columns are resized on-the-fly.

allan

There are no column resizing plug-ins available for DataTables that I am aware of (well - there is ColReorderWithResizing - but that's not supported by me and is broken with the latest versions of DataTables I think).

Allan

infoheights

Thanks Allan. I guess i have to do away with the resizing feature then.

I have reported one more problem in this thread..

I am trying to reset sort to original using fnsortneutral but it doesnt seem to do what it is supposed to.

[code]


//changes by anu to revert to original sort - alert is called but sort neutral does not happen
$('#resetsort').click( function() {
alert("came here");
var oTable = $('#studenttable').dataTable();
oTable.fnSortNeutral();
//oTable.fnSort([[0,'asc']]);
// redraw the datatable
oTable.fnDraw();

});
[/code]