Quantcast
Viewing all articles
Browse latest Browse all 82130

Toggling multiple columns

I can show/hide one column by using this: http://www.datatables.net/examples/api/show_hide.html

But I need to toggle multiple columns of a table.
I have this table:
<table id="myTable">
<tbody>
<tr>
    <td class="class1">aaa</td>
    <td class="class1">bbb</td>
    <td class="class1">ccc</td>

    <td class="class2">ddd</td>
    <td class="class2">eee</td>
</tr>

<tr>
    <td class="class1">fff</td>
    <td class="class1">ggg</td>
    <td class="class1">hhh</td>

    <td class="class2">iii</td>
    <td class="class2">jjj</td>
</tr>
</tbody>
</table>

So I wrote this:
function showHide() {
	var indices = [];
	$("#myTable tbody tr").first().children("td.myclass").each(function(){
	indices.push($(this).index());
	});

	var oTable = $("#myTable").dataTable();
	for(var ind in indices)
	{
		var iCol = indices[ind];
		var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
		oTable.fnSetColumnVis( iCol, bVis ? false : true );
	} 
}


It works well first time I run showHide(). But when I run showHide() second time, it can't find the columns. It gives an empty "indices" array.

I tried ColVis. But it doesn't give me option to hide/show them by the class names of columns. It permits to hide/show one by one and by selecting the column name.

Is there a better solution for the multiple column toggling??
Thank you.

Viewing all articles
Browse latest Browse all 82130

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>