added new columns to a table ; but when I call dataTable.api.columns().visible(true)

umaeswara

added new columns to a table ; but when I call dataTable.api.columns().visible(true) the new columns are going away. only old columns are existing. why?
i have calculated (column1/coulmn2) and created column3 ; col4, col5, col6=(col4/col5)
it was showing the table with col1, col2, col3.col4,col5,col6 after that I wanted to do some column show/hide.
so when i wanted to show all; and called function $('table').dataTable().api().columns().visible(true);
the table header went back to col1, col2 ( NO COL3). col4, col5, (NO col6)

--- here the table has all cols new and old ----
jQuery(document).on('click', "#viewbtn" , function(e) {
$('table').dataTable().api().columns().visible(true); --> here it went back to col1, col2 (no col3).

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

umaeswara

HI Colin, thanks for looking into my question.
i am unable to add my testcase, i will try to simplify the testcase and add. But Please meanwhile can you please look into my explanation. and please see if you can answer.

My initial table has
col1 col2 col4 col5
1 2 3 4

I traverse through each row and create col3 which parseFloat(col1)/parseFloat(col2)
and similarly i have created col6 which is parseFloat(col4)/parseFloat(col5).

i was able to see my table now as
col1 col2 col3 col4 col5 col6
1 2 0.5 3 4 0.75

which is correct with new columns added. happy.

when I try to hide some columns i called my
function process_colselected() {
var interest = '';
var showall = false;
$('table').dataTable().api().columns().visible(true);
$('[name="interest"]').each(function(i,e) {
if ($(e).is(':checked')) {
if ( e.value === "-1" ) {
showall = true;
$('table').dataTable().api().columns().visible(true);
} else {
if ( showall ) {
colselector_alert();
return false;
} else {
var column = $('table').dataTable().api().column(e.value)
column.visible( false );
}
}
}
});
}

when showall button clicked, and this process_colselected executed during this step -- $('table').dataTable().api().columns().visible(true); the new columns got disappeared. and the table looks

col1 col2 col4 col5
1 2 0.5 3 4 0.75

So what I observe is, new columns got added correctly. but any other table.dataTable.api functions called it is coming back to original table.

can you please please help me.

thanks,

umaeswara

I think i may need to reinitialize my table?? destroying previous table, after adding new columns. please let me know if that is correct? if yes, how do I do that? And also how do i reinitialize my new table?

umaeswara

If I use
$('table').dataTable().api().clear().destroy();
it is clearing the content; but the Header is still present. the new header
col1, col2, col3, col4, col5, col6 is not coming.

umaeswara

I am trying to use https://datatables.net/forums/discussion/44956/how-to-destroy-and-reinitialize-the-datatable method.

kthorngren

I traverse through each row and create col3 which parseFloat(col1)/parseFloat(col2)

Sounds like you are using non-Datatable methods to add the column. You need to start the Datatable with the columns you want. If you simply add them to the HTML Datatables won't know about them.

You didn't post your Datatablies init code so I'm not sure what you have. Use columns to define all of the columns you want. Then use columns.render or rowCallback to create your calculated columns.

Here is a simple example using columns.render:
http://live.datatables.net/dogelivo/1/edit

If you still have questions please update my example to reflect your data and what you want to do.

Kevin

umaeswara

Thanks Kevin. thank you very much.

umaeswara

I have made my testcase, cloning yours . here it is http://live.datatables.net/rupajema/1/edit

in the render function, how can I delete or remove rows which have ratio less than 1.
thanks.

kthorngren

The columns.render function is not the place to hide rows. You can do this by creating a search plugin. I updated your example to show a simple plugin:
http://live.datatables.net/rupajema/2/edit

It just checks for column 0 value equal to 4. If it is then the row is filtered from the table. You can update it for any check you like.

Kevin

umaeswara

Excellent, i think this will help. let me try and get back. Thank you Kevin. i was removing using each() function -- each row by checking row[0] == 4 -- which is taking long time.

umaeswara

do you have sorting plugin too? like i tag my rows with a special class "important" and class "later" ; i want all my important rows should come in the table first, and later the rows with class "later" .

<tr class="important" >
<tr class="later" >
<tr class="later" >
<tr class="important" >
<tr class="important" >

is there a plug-in to sort them and make it
<tr class="important" >
<tr class="important" >
<tr class="important" >
<tr class="later" >
<tr class="later" >

colin

You could modify one of the DOM plugins for that, such as this one. There it's reading the val(), you could modify that to read the class.

Colin