Search code examples
jqueryknockout.jsdatatablesjquery-templates

DataTables - display special rows with differnent cells and formatting

We're using the jQuery DataTables plug-in. The plug-in seems to be quite a bit unflexible. We've worked around 2 major issues already and are facing a 3rd now:

In our table we want to display a special row which is not an entity of the type all the others are. It serves as a visual separator between the rows above and the rows below. It has a different number of cells, a different format and a different content.

Wireframe

We're using jQuery templates to render the row contents in conjunction with the knockoutjs binding handler by cognitive shift. There seems not to be any way to customize different types of rows or anything in datatables, so cogshift overrides the fnRowCallback to support jQuery templates.

The way we're currently considering to solve this issue is by adding a "dummy" item to the viewmodel which has a special property, e.g. "IsDummy()" to determine how to render it. In the jQuery template we render the row differntly based on this property:

<script id="template" type="text/x-jquery-tmpl">
    {{if IsDummy()}}
        <td colspan="5" style="background-color:yellow; text-align: center">
            Entries starting with ${StartLetter}
        </td>
    {{else}}
        <td>${Id}</td><td>${Name}</td>...
    {{/if}}
</script>

However this will break datatables at the latest when trying to sort, because it saves all td-s in a 1-dim array and relies on arithmetics to retrieve the right cell based on row and column number, or in short terms: All rows must have the same number of columns.

This is the point when I stopped and realized how awkward all these hacks are going to be and that there must be a better approach, or I might be missing a feature of datatables completely. - although I'm afraid that's not the case...

Can anyone give me some guidance here?

Update: In the meanwhile I found even more issues:

  • If there aren't any "real" entries in the array, I want the datatable to display "no data found", i.e. I have to dynamically remove the dummy item if all other items are removed, and add it back once a new "real" entry is added.
  • The summary of datatables says "Showing 6 of 6 entries" if there are 5 "real" entries because of the dummy entry...
Solution

  • Way late to the game, but there is support for a pseudo section header now: http://datatables.net/release-datatables/examples/advanced_init/row_grouping.html