Should HTML 5 data attribute classes work with columnDefs target syntax?

syl_jeverett

I'm hoping to incorporate DataTables into XSLT templates, so ideally I'd like to make a generic DataTable config that can apply to multiple datasets.

For this, the HTML 5 data attributes feature seems great, because I can assign a class to a column in the data, which may vary for each dataset, but implement them with a single generic config.

Looking at this test case:
https://live.datatables.net/ridosuno/1/edit

You can see that HTML 5 data attributes classes work fine for setting up a colvisGroup button:

I set up classes in the data:

            <th data-class-name="min">Name</th>
            <th data-class-name="min filter">Position</th>
            <th data-class-name="custom filter">Office</th>
            <th data-class-name="custom">Age</th>
            <th data-class-name="custom">Start date</th>
            <th data-class-name="min">Salary</th>

and then can make a functional colvisGroup button based upon those classes:

     {
            extend: 'colvisGroup',
            text: 'Min View',
            // here targeting by class works fine
            show: '.min',
            hide: '.custom'
          },

However, when I try to do the same with columnDefs -- either to setup initial DataTable columns to be visible, or to define which searchPanes columns should show -- I can't get targeting by the HTML 5 data attribute defined classes to work.
Basic targeting by an array of column numbers works fine:
{ targets: [0, 1, 5], visible: true},
but not this:
{ targets: 'min', visible: true},
and this works:
{ searchPanes: {show: true}, targets: [1,2] },
but not this:
{ searchPanes: {show: true}, targets: 'filter' },

The columnDefs documentation says:
"targets property... can be... A CSS selector - columns that match the selector will be used (since 2.0)"
and I think I'm following the syntax shown in the class based example in the columnDefs.targets page as well (although I also tried using syntax of "targets: '.min'" with no luck either).

Am I missing the right syntax somehow, or do maybe HTML 5 data attribute classes just not work as columnDefs targets?

Thanks for any pointers.

syl_jeverett

Sorry, proper test case here:
https://live.datatables.net/dafecepi/1/edit

allan

Hi,

It is a sequence of events ordering issue. The class name from the data-class-name is not applied before the detection of the columns for the targets selector. So it won't find anything at that point. I don't think there is a quick fix for this as there are other things that depend on that sequence of events.

However, you could, in your XSLT add a class to the th as well, which then does allow it to work, since the selector will find it: https://live.datatables.net/kuyikigu/1/edit . You might not need the data-class-name at this point - it depends if you want the class to be applied to all cells or not.

Allan

https://live.datatables.net/kuyikigu/1/edit

syl_jeverett

Thanks much! Good to understand the limit of the data-class-name scope, and it seems like for what I'm doing -- limiting searchPanes, and initial visible columns -- just a class on the <th> works. (I don't know why I was thinking those functions needed classes down to the cells to work -- I'm still getting up to speed here, no doubt.)

Anyway, now it works beautifully. I define each column <th> (in the original XSLT HTML transform) with a class of either min, rich, or custom, and optionally filter, e.g.:

<tr>
  <th class="min filter">Vuln_Group</th>
  <th class="min filter">Vulnerabity</th>
  <th class="min filter">Severity</th>
  <th class="min filter">Count</th>
  <th class="min filter">CISA_Due_Date</th>
  <th class="rich">Plugin Link</th>
  <th class="custom">Synopsis</th>
  <th class="custom">Solution</th>
</tr>

Then, initialize the DataTable with columnDefs of:

columnDefs: [
    { targets: 'min', visible: true},
    { targets: '_all', visible: false },
    
    { searchPanes: {show:  true}, targets: 'filter' },
    { searchPanes: {show: false}, targets: ['_all'] },
  ],

and a set of buttons in the layout like:

  layout: {
    // ...
    topEnd: {
        buttons: [
        {
          extend: 'colvisGroup',
          text: 'Min View',
          show: '.min',
          hide: ['.rich','.custom']
        },
        {
          extend: 'colvisGroup',
          text: 'Rich View',
          show: ['min','.rich'],
          hide: '.custom'
        },
        {
          extend: 'colvisGroup',
          text: 'Show all',
          show: ':hidden'
        },
        {
          extend: 'colvis',
          text: 'Custom Columns'
        }
        ]
    },
  }

and, I can initialize all of my DataTables with a common, generalized initialization, yet get different default column views and searchPanes driven by options in the HTML, which is generated by XSLT.

In the end, the user can also further customize the view (minimal, rich, all, or individually selected columns) and get to see exactly what's needed/desired.

Here's a version in a test case with the sample data:
https://live.datatables.net/dafecepi/3/edit

Thanks for everything! All of the functionality in DataTables is such a game-changer!