Choose columns to hide

carcleo

Hy friend.

I have a basic but difucult doubt.

I know that for exemple

<a class="toggle-vis" data-column = "12">HOLERITES</a>

Its works fine to a collumn, but i need do it with more collumns, to case of colspan.

<a class="toggle-vis" data-columns = "[12,13,14,15]">HOLERITES</a>

Detal:

I woud like of click at the button and only that collumn will be affected. The othhers not.

It is possible this way?

Thank that who can help-me.

I am Brasilian, than please, not worry for my english.

kthorngren

<a class="toggle-vis" data-column = "12">HOLERITES</a>

I'm not sure how this works. Are you using column().visible() API with this?

<a class="toggle-vis" data-columns = "[12,13,14,15]">HOLERITES</a>

Maybe you can use columns().visible() and pass in the array.

Kevin

carcleo

can you give-me a exemplo ?

My table is like:
**<tr>
<th colspan=5>Colls of One to five</th>
<th>Coll Six</th>
</tr>

<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
....
<tr>
<td>Data One</td>
<td>Data Two</td>
<td>Data three</td>
<td>Data four</td>
<td>Data five</td>
<td>Data Six</td>
</tr>**

kthorngren

Here is an example:
http://live.datatables.net/tulozita/1/edit

Update the test case with what you are trying to do if you need more specific help.

Kevin

carcleo

I did update the above comment

kthorngren

If you are having issues or questions please update the test case with what you are trying to do and provide information of how to recreate the issue.

Kevin

carcleo

Ok, lets go.

<a>Togle Button</a>

My table is like:
**
<tr>
<th colspan=5>Colls of One to five</th>
<th>Coll Six</th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
....
<tr>
<td>Data One</td>
<td>Data Two</td>
<td>Data three</td>
<td>Data four</td>
<td>Data five</td>
<td>Data Six</td>
</tr>
**

I would like hide and show the first collumn in a toggle button

kthorngren

Updated the example to show how to toggle. It uses column().visible() to get the current visibility to set the column visibility.
http://live.datatables.net/tulozita/2/edit

Kevin

carcleo

In the your example i dont found anything like:

<table>
  <thead>
     <tr>
         <th colspan=5>Colls of One to five</th>
      </tr>
  </thead>
  <tbody>
     <tr>
        <td>One</td>
        <td>Two</td>
         <td>three</td>
         <td>four</td>
         <td>five</td>
       </tr>
  </tbody>
</table>

1 th colspan=5
5 tds colspan=1

I need hde it all

colin

As Kevin said, please update the test case to reflect your problem - if we can see it, we can debug it,

Colin

kthorngren

1 th colspan=5

See this example about complex headers. You need to have one header row that contains a th tag for each column. Having one -thead row with -tg colspan is not supported by Datatables.

I need hde it all

Do you mean the whole table? Just use jQuery to hide the table. Inspect your page to find the `-tag div1 the Datatable is in to hide all the elements.

Please be specific about what you want to hide. Each post the requirement changes from hiding multiple columns, to toggling one column to hiding it all.

Kevin

carcleo

I need hde it all, it means all collumns that follow the colspn collum
About this example:

https://datatables.net/examples/basic_init/complex_header.html

My table is similar.

But i need hide and show the HR Information collum with colspan

kthorngren

As mentioned before use columns().visible() to hide or show multiple columns. Pass into columns() a column-selector to choose the columns to hide. Use an array of column indexes or maybe classname as an example. My example above uses an array of column indexes.

Pass true or false into the columns().visible() to toggle the visibility. You can use the visibility state of one of the columns, assuming they are all toggled at the same time. Otherwise you can loop through each with columns().every() to toggle each one individually.

See this example with colspan and toggling the HR columns:
http://live.datatables.net/tulozita/4/edit

Kevin

carcleo

Okay guys, thanks.

The problem is removing and inserting colspan on hide and show columns.

A blank space is getting between the two columns when I remove the middle column between them

But okay, looks like I'll have to learn to live with it. Hahaha

Thanks for everything!

kthorngren

A blank space is getting between the two columns when I remove the middle column between them

Do you see that problem in the test case? If you do please provide the steps to show the issue.

I updated the test case to remove the middle column of the Contact colspan:
http://live.datatables.net/tulozita/6/edit

We can take a look if you provide a test case that shows the problem.

Kevin

carcleo

I got it
<a class="toggle-vis" data-columns="1">Admissão</a>
<a class="toggle-vis" data-columns="2,3,4,5,6">Filial</a>

    <table>
      <thead>
         <tr>
             <th>Colls One</th>
          </tr>
         <tr>
             <th colspan=5>Colls of Two to Six</th>
          </tr>
      </thead>
      <tbody>
         <tr>
            <td>One</td>
            <td>Two</td>
             <td>three</td>
             <td>four</td>
             <td>five</td>
             <td>Six</td>
           </tr>
      </tbody>
    </table>

    .......

    table.DataTable({
          autoWidth: false,
    ........
    })

    .........

    $('a.toggle-vis').on( 'click', function (e) {
      e.preventDefault();
      var collumns_str = $(this).attr('data-columns')
      var collumns = collumns_str.split(",")
      collumns.forEach(function(collumn) {
        var column = tabela.column( collumn );  
        column.visible( ! column.visible() );
      })
    });  

kthorngren

Please provide a running example of the issue. Code snippets won't help use debug.

Kevin

carcleo

https://jsfiddle.net/carcleo1999/8xjLz1c6/15/

See you it.

It was what i did need

Tank you!

I did it!