jQuery数据表：标头自定义，动态列隐藏

Question

I've got some (probably) minor questions with regards to some user experience in DataTables. I've asked this on the datatables support forum but my bumping the question probably broke some rule... or my request just isn't interesting enough to answer ^_^

(also, this is mostly a copy/paste from the post there. i hope you'll forgive me.)

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.

---

Here's a JSBin link so you can read along as I try to explain: DataTables JSBin

The contents of the JSON that is called in the jsbin above:

{
    "data":[
            {
            "Name":"Sinatra, Frank",
            "A Application1":"X",
            "SomeGroup":"X",
            "A Application2":null,
            "A Application3":"X",
            "R Rights to service":"X",
            "A Application4":null
            },
            {
            "Name":"Davis, Sammy",
            "A Application1":"X",
            "SomeGroup":"X",
            "A Application2":null,
            "A Application3":"X",
            "R Rights to service":"X",
            "A Application4":null
            },
            {
            "Name":"Martin, Dean",
            "A Application1":"X",
            "SomeGroup":"X",
            "A Application2":null,
            "A Application3":"X",
            "R Rights to service":"X",
            "A Application4":"X"
            },
            {
            "Name":"Bishop, Joey",
            "A Application1":"X",
            "SomeGroup":"X",
            "A Application2":"X",
            "A Application3":null,
            "R Rights to service":"X",
            "A Application4":null
            }
    ],
    "columns":[
            {
            "title":"Name","data":"Name"
            },
            {
            "title":"A Application1","data":"A Application1"
            },
            {
            "title":"SomeGroup","data":"SomeGroup"
            },
            {
            "title":"A Application2","data":"A Application2"
            },
            {
            "title":"A Application3","data":"A Application3"
            },
            {
            "title":"R Rights to service","data":"R Rights to service"
            },
            {
            "title":"A Application4","data":"A Application4"
            }
        ]

}

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.

---

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>

(edit) I have solved this by calling a wrapInner as shown in the following jsbin: Datatables JSBin

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 via a powershell script. 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.

Answer 1

I'm not sure if this helps, but I faced a similar problem in my project. I was working with JSP pages and I could use JSTL libraries and this is how I did it. My column number was fixed and I had to apply a class to each row of the table data.

<tbody>
<c:forEach var="dataObject" items="${dataList}" varStatus="listIndex">
<c:choose>
<c:when test="${(listIndex.index mod 2) eq 0}">
<tr class="even pointer">
</c:when>
<c:otherwise>
<tr class="odd pointer">
</c:otherwise>
</c:choose>
<td> ${dataObject.attribute} </td>
........
Add as many columns you have ...
</tr>
</c:forEach>
</tbody>

If you have dynamic columns, I think you can still use a nested for loop to loop through the column data. I usually have a map created in runtime and use this map as a reference to loop through. Hope this helps.

Since you have a js file which controls the data, I think you can use if else conditions and use element ids.