Some questions. regarding: Header customization, dynamic column hiding.

Beeneh

Hello there,

I've got some (probably) minor questions with regards to some user experience in DataTables.

I'll start off by saying that I'm not an experienced programmer. I've started on this journey pretty much from scratch a few weeks ago and therefore there is a very big chance that I've been looking the solution straight in the face while not realising that I've been doing so. I've read through the documentation a few times but I don't think i'm quite able to complete these final bits without some guidance.

I had some time to spare, so please excuse the giant wall of text.

• Here's a JSBin link so you can read along as I try to explain: DataTables JSBin
• The example JSON file is located here: JSON link

My use of DataTables is perhaps slightly unorthodox, but I don't believe that this should cause an issue. As you can see I'm building a grid which displays access rights for a group of users, so that a user (admin / manager) has an overview of an entire team's access rights and is able to compare users on the fly.
It looks somewhat fine for this example but the json file that I would generate internally is of course a bit larger (average of around 200kb filesize, uncompressed). Therein lies my problem. I'd like to rotate the headers by 45 degrees to achieve a nicer looking grid. I can do it fine in static html based DataTables but I can't seem to be able to get it done in the dynamically generated version. I'm probably staring myself blind on how to achieve what I want.

Example of the result when using static HTML built table:

---

My first question: How can I dynamically add a div, and a span inside the headers, as well as add a class to the th. So that the end result would be something like:

• <th class="rotate-45"><div><span>Header</span></div></th>

Of course I tried to solve this myself, but I have not been able to get further than this: DataTables JSBin. Which, again, most likely has everything to do with my own inexperience. The headers get built properly, but the actual data is not being loaded/applied. I'm probably calling the data in the wrong way, or the way my json file is built is making it difficult?

An additional question which would apply after succesfully rotating: When the headers get rotated in the static HTML, the "clickable area" does not correspond with the text position and orientation (understandable). Is it possible to constrict the sorting to the divs created, or perhaps to a small area in front of the header text. For example: only sort columns by clicking the the sort icon (if they were to be positioned properly in front of the text)

---

My second question is with regards to displaying filtered data. I'd like to hide a column whenever a search result returns a column that is empty for all rows. For example: if the user searches for frank;dean, the column of A Application2 would not be displayed, as neither Frank nor Dean are linked to that application.

How can I achieve this cleanly and dynamically?

---

Some additional info about my local solution which may or may not be important: My HTML pages and the JSON files are generated automatically for many different groups.
Additionally, I am not running the DataTables code inline, i've got a separate buildcontent.js file which has all the DataTables code. a variable gets created in the html file so that buildcontent.js knows which json file to use.

I'm assuming that this will not have a big impact on a possible solution. If it does, please let me know.

I hope that the questions are clear enough, and that the giant wall of text was not too exhausting.

Thanks in advance for any advice or pointers in the right direction.

p.s.

Another (known?) "issue" I've noticed, is that when using jquery 3, the fixedColumn bottom row is not aligning properly. (I am using Chrome 60.0+) Even though everything else is identical: example

Beeneh

I'm going to be shameless and give this a bump.

I hope someone is able to comment, even for no other reason than to say "Yer' doin' it all wrong!"

Beeneh

I'm going to attempt bumping this one last time.

Right after making this bump I had a minor epiphany and now I've managed to get the div/span wrapping working. But on a page load the floating column on the left does not resize properly initially, but fixes itself after sorting a column. I will make a followup post with the new situation. (I only have 10 minutes to edit this one)

allan

Hi,

Sorry I haven't posted back on this one yet. Good to hear you have the div/span inserted correctly now.

It might be that you need to call fixedColumns.relayout() when the table initialisation is complete. It possibly depends how exactly you are adding the div/span. I'd use $().wrap() before initialising the DataTable.

Allan

Beeneh

No worries at all! Thanks for taking the time.

Here's a new jsbin link so you can see how I have applied the wrapping and the relayout that you have suggested.

The first column is still showing a minor alignment and cell width issues, which is all resolve resolve after sorting any column. So I am assuming that I'm not calling the relayout / reload properly.