Header templating

jbritton

I'd like to create a complex header for my table. Something along the lines of this:

[code]


<!-- column groupings -->

Employee
Compensation

<!-- column headers -->

Name
Email
Title
Salary



<!-- column summaries -->




$50,000



<!-- table rows -->










[/code]

The table header detection algorithm attaches sort classes to the wrong TH elements. What is the best way to bypass this functionality? I would love to specify which row contains unique TH elements via a JQuery selector. (ie. tr.header-row) How might I accomplish this?

allan

That's not valid HTML though. The HTML specification specifically says that you can have only one thead and tooter element in the table. You can have multiple tbody elements (although DataTables doesn't support that).

You can have as many rows as you want in a header - just put the second row in the first header and remove the second header. Also the bSortCellsTop option can be used to control which row int he header the sort handlers are applied to.

Allan

jbritton

You're right about the invalid HTML. I accidentally posted some code that I used as a work-around. Assuming the header rows were all contained within the same thead element, I would want to select the middle header row. I don't believe that bSortCellsTop would help me in that scenario as it would select either the top or bottom row.

allan

> I would want to select the middle header row

Unfortunately there isn't a built in way of doing that in DataTables at the moment. You would need to either modify DataTables or use the fnSortListener API method to add the sort listener to the columns you want.

Allan

jbritton

Thanks for your help. Rather than modifying the source code directly, perhaps I could write a plugin/extension that modifies the default header detection behavior? Or would that be highly frowned upon?

-Jeff

allan

Not frowned upon at all! Plug-ins are an excellent way of doing these things. However, I don't think there is really a hook in DataTables for that...

This is the function where DataTables does its header detection: https://github.com/DataTables/DataTablesSrc/blob/master/js/core/core.draw.js#L703 - bSortCellsTop is the variable that changes the behaviour. I guess that could be changed to a selector, although it could introduce a fair amount of code, and I'm already 0.5K over "limit" for 1.10.

Allan

jbritton

Great. Thanks for your help. Our designers like to design complicated table headers. ;) I plan to experiment with this. I'll let you know if I come up with a decent solution.