New appended to data table header not getting hidden

vinitsharma

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.

vinitsharma

I have taken tags for the search functionality in each and every columns of the datatable. However i am not able to hide the search textboxes anyhow. Please tell me the solution for this asap. How can i hide aoPreSearchCols item ?

vinitsharma

No one is having any solution for this or what ? I request each and everyone seeing this post to help me on this about how can i hide the elements which i have kept for individual column filtering on hide of any column through show/hide button. Kindly help please its a humble request.

allan

> I have a data table in which i am appending a whole new to the header of data table.

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

vinitsharma

Thanx for your reply Allan, well i myself found a solution for my problem. In fnHeaderCallback() function, i am calling a javascript function inside fnHeaderCallback(). This function does the work of checking first as for which columns out of aoColumns is getting hidden. I am running a for loop and according to the columns being getting hidden, i am creating a string consisting of the required tags and afterwards i am just appending my to the header. But problem with this is that, how can i remove my old from the header. If i can get access of the old consisting of the textboxes for search, i can try to remove it and append my whole new updated and thus can get my desired functionality. So how could i access my old can you please tell me about it.? Thanx for your help.

vinitsharma

Dear Allan, i am very near to my solution, can you please help me. Please tell me how can I check for whether my data table is drawing for the first time or it is being getting redrawn. Also one more thing. Suppose i have added the having search textboxes for the first time the table was drawn. Now at the time of redrawing, how can I remove my old from the data table. Kindly help me for this.

allan

You can use iDraw ( http://datatables.net/docs/DataTables/1.9.2/DataTable.models.oSettings.html#iDraw ) to tell when a table is being draw for the first time.

Allan

vinitsharma

[quote]
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]

vinitsharma

Listen Allan, the code for search functionality was written inside document.ready() function. So I need to attach or associate this search functionality code with document.ready() somehow. So how can I do this. Because I tried writing this search functionality code inside fnHeaderCallback(), but as the scope of this function ends with the last line of fnHeaderCallback, so I need to attach or associate my search functionality code or specify this code as the datatable settings somehow. So how can I do this or how can I specify or add some settings to datatable for attaching something to my elements.? Please tell.

vinitsharma

No one has any solution for this ? I want to bind or attach the search functionality code as written above. How can we bind that.

vinitsharma

Please tell me how can i bind particular settings to the datatable by making use of any particular method ? Can I make use of oSettings or something so that I could bind or attach the search functionality code to the newly created dynamic ??? Please help me.!

vinitsharma

No one has any help for this ?