Buttons 'colvis' - add 'columnToggle' button in middle of list

lisarush · January 2016

I am using the 'colvis' button in a button set. However, I have many columns & don't want to list them all individually in the collection list. What I would like to do (and did previously with ColVis extension via the 'groups' option), is have the 'colvis' button list a portion(most) of the columns (ones I don't exclude, this I have done). But, I then want to add additional buttons to control Groups of the other columns. I have successfully done this using 'postfixButtons' option & having a button that extends 'columnToggle'. It works.
However, what I am having problems with is this (please correct me if there's a better way to go about this):
1) I would like to add the 'columnToggle' button NOT as a pre- or post- fix button in the list, but rather according to the location in the table where the columns actually are. (Have tried using straight 'buttons' option, but don't know how to configure it.)
2) When I toggle the button (using jQuery UI styling), it is not changing styles.

Below is an example of basic functionality, however, styling is not accurate. I would like the "Toggle multiple" button to be located after the "Name" button.

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/ju/jszip-2.5.0,dt-1.10.10,b-1.1.0,b-colvis-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,r-2.0.0,sc-1.4.0/datatables.min.css"/>
   <script type="text/javascript" src="https://cdn.datatables.net/s/ju/jszip-2.5.0,dt-1.10.10,b-1.1.0,b-colvis-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,r-2.0.0,sc-1.4.0/datatables.min.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  
</head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th class="noColvis hideInitial">Position</th>
            <th class="noColvis hideInitial">Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
                 </tbody>
      </table>
    </div>
  <script>
$(document).ready( function () {
  var table = $('#example').DataTable({
    buttons: ['pageLength',
      { extend: 'colvis',
        columns: ':not(.noColvis)',
        postfixButtons: [{extend:'columnToggle',
                          text:'Toggle multiple',
                          columns:'.hideInitial'
                         }]
      }]
  });
  
  table.buttons().container().appendTo( $('.dataTables_filter', table.table().container()) );
} );
</script>
</body>
</html>

lisarush · May 2016

Due to the deficiency of problem #1, I have still been using the deprecated ColVis extension. Have now decided to go ahead & move to Buttons instead & deal with it.

I have worked around the deficiency of problem #1 by using either prefixButtons or postfixButtons -- but it is still not what I would like. Still not ideal for many cases.

Just wanted to add a note here about problem #2. I have implemented a fix, see:
https://datatables.net/forums/discussion/34826/columnvisibility-button-color-when-selected#latest

allan · May 2016

1) I would like to add the 'columnToggle' button NOT as a pre- or post- fix button in the list, but rather according to the location in the table where the columns actually are.

You would need to define each column's own toggle button individually in that case. For example:

{
  extend: 'collection',
  buttons: [
    { extend: 'columnToggle', columns: 0 },
    { extend: 'columnToggle', text:'Toggle multiple', columns:'.hideInitial' },
    { extend: 'columnToggle', columns: 2 },
    { extend: 'columnToggle', columns: 3 },
    ...
  ]
}

2) When I toggle the button (using jQuery UI styling), it is not changing styles.

Thank you - I'll post back in your other thread on this topic.

Allan

lisarush · May 2016

I know that I could also use 'buttons' to define each button, but this is a HUGE pain & deficiency, in my opinion. And it worked as I would desire with the now-deprecated ColVis extension.
I often build my tables dynamically, and their content may change depending on which customer's data and also on the user's role. So, having to calculate which columns is a big pain. Having the groups automatically fit in the right location was a big feature.

allan · May 2016

I don't think I understand your question when I read it this morning - sorry. let's step back - don't use the colvis button type here. Use collection and define your own set of buttons:

{
  extend: 'collection',
  buttons: [
    { extend: 'columnsToggle', columns: '.myColumns' }, // will be expanded to individual buttons
    { extend: 'columnToggle', text:'Toggle multiple', columns:'.hideInitial' } // single button grouped
    ...
  ]
}

I would be really surprised if there were something ColVis could do that Buttons can't in terms of button layout, its just that it will do it differently.

Allan

lisarush · May 2016

Am I missing something?? Given the example below, I would like the 'Notification' item in the button collection to be listed directly after 'Col6' -- so the list of buttons is in the same order as the columns in the table. ? This was automatic with the 'ColVis' extension.

I do realize that I could do something like add classes for each range of buttons around each 'columnToggle' button, e.g. add 'class="before"' to each column before and add 'class="after"' to each column after -- and therefore just have 3 lines in the 'buttons' definition for this particular case. However, it makes the button definition more complicated; you'd have to list each 'range' of buttons (.before, .notif, .after) -- instead of simply adding the 1 grouped set that you want to add. Also, you'd have to add the class on each column.

<html>
<head>  
   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/ju-1.11.4/jq-2.2.0,dt-1.10.11,b-1.1.2,b-colvis-1.1.2,b-html5-1.1.2,b-print-1.1.2/datatables.min.css"/>
  
   <script type="text/javascript" src="https://cdn.datatables.net/t/ju-1.11.4/jq-2.2.0,dt-1.10.11,b-1.1.2,b-colvis-1.1.2,b-html5-1.1.2,b-print-1.1.2/datatables.min.js"></script>
</head>
 
<body>
 
<table class="display cell-border">
<thead>
<tr>
   <th>Name</th>
   <th>Job Title</th>
   <th>Company</th>
   <th>Col4</th>
   <th>Col5</th>
   <th>Col6</th>
    
   <th class="noColvis notif">Email</th>
   <th class="noColvis notif">Page</th>
   <th class="noColvis notif">Call</th>
   
   <th>Col10</th>
   <th>Col11</th>
   <th>Col12</th>
   <th>Col13</th>
   <th>Col14</th>   
   <th>Col15</th>   
</tr>
</thead>
 
<tbody>
   <tr>
      <td>Fred Flintstone</td>
      <td>Digger</td>
      <td>ACME</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
       
      <td> yes </td>
      <td> yes </td>
      <td> no </td>

      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
   </tr>
   <tr>
      <td>Barney Rubble</td>
      <td>Digger</td>
      <td>ACME</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
       
      <td> yes </td>
      <td> yes </td>
      <td> no </td>

      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
   </tr>
   <tr>
      <td>Joe Manager</td>
      <td>Supervisor</td>
      <td>ACME</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
       
      <td> no </td>
      <td> no </td>
      <td> yes </td>

      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
   </tr>
</tbody>
</table>
 
 
<script type="text/javascript">
$(function() {
   $('table.display').DataTable( {
                                   dom: '<"H"<"dataTables_title">CBfr>t<"F"ip>',
                                    buttons: [{extend: 'collection',
                                              buttons: [{extend: 'columnsToggle', columns:':not(.noColvis)'},
                                                        {extend: 'columnToggle', text:"Notification", columns:'.notif'}
                                                       ]
                                             }]
                                   } );
});
</script>
 
</body>
</html>

allan · May 2016

No - you aren't missing anything. I am. I hadn't realised / remembered that that was how ColVis did the grouping (I'm somewhat surprised - I had thought it was completely sequential from the Javascript definition).

At the moment, the only solution to have the columns listed individually, until a group and then individually again after the group would be to add an extra class to your before columns and use that in the columns selector.

Allan

Buttons 'colvis' - add 'columnToggle' button in middle of list

Buttons 'colvis' - add 'columnToggle' button in middle of list

Answers

Howdy, Stranger!

Categories

DataTables

Buttons 'colvis' - add 'columnToggle' button in middle of list

Buttons 'colvis' - add 'columnToggle' button in middle of list

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables