New appended to data table header not getting hidden
New appended to data table header not getting hidden
vinitsharma
Posts: 23Questions: 0Answers: 0
I have a data table in which i am appending a whole new to the header of data table. The td(s) of this new added tr contains elements in each td for having search functionality of that concerned column. I have show/hide button in thead for showing/hiding a particular column. The column does gets hidden but the of the new appended is not getting hidden. How could i also hide the new along with hiding a particular column. How can be that specific can be made hidden for the column which is made hidden from the show/hide button. Kindly give me the solution for it if any. Thanks.
This discussion has been closed.
Replies
This won't work as expected unless you do it before you initialise the DataTable. DataTables can't know that you've changed the DOM if you do it afterwards - thus it doesn't register the elements for showing / hiding etc.
Allan
Allan
Many thanx to you Allan, well the functionality which I wanted exactly has got implemented. My search textbox are getting hidden along with the columns which i am hiding through the show/hide button. As I told you earlier that I am first removing the old through the .remove() method of jquery and appending a totally new dynamic according to the columns whose bVisible is true in aoColumns. But now my problem is that, I am not able to have the search functionality through the textboxes appended for search functionality. I have written the code for the search functionality which is as under:
[/quote]
[code]
var TableHeader = $('#<%= gvwLineListing.ClientID %>' + ' thead');
if (TableHeader.dataTableSettings[0] != undefined) {
var TableHeaderTD = TableHeader.dataTableSettings[0].nTHead;
//$(TableHeaderTD).append(''); //Comment portion ends here. The work of appending is done in //another function.
$("thead input").keyup(function() {
oTable.fnFilter(this.value, oTable.oApi._fnVisibleToColumnIndex(
oTable.fnSettings(), $("thead input").index(this)));
});
$("thead input").each(function(i) {
this.initVal = this.value;
});
$("thead input").focus(function() {
if (this.className == "search_init") {
this.className = "";
this.value = "";
}
});
$("thead input").blur(function(i) {
if (this.value == "") {
this.className = "search_init";
this.value = this.initVal;
}
});
}
[/code]
[quote]
The above code is for search functionality of the individual columns. This code written above is added in the datatables properties declaration section, for example we specify for having buttons in the header of datatable, etc etc. So this code I want to bind or attach with the dynamic i am appending to the datatable header. So how can I bind or attach or specify this code for the dynamic I am appending to the datatable so that my search functionality for each and every textbox retains.? Please help me for this. Thanx in advance.
[/quote]