Should HTML 5 data attribute classes work with columnDefs target syntax?
Should HTML 5 data attribute classes work with columnDefs target syntax?
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.
This question has an accepted answers - jump to answer
Answers
Sorry, proper test case here:
https://live.datatables.net/dafecepi/1/edit
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 thetargets
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 thedata-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
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
, orcustom
, and optionallyfilter
, e.g.:Then, initialize the DataTable with columnDefs of:
and a set of buttons in the layout like:
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!