title: DataTables - display special rows with differnent cells and formatting
body: <p>We're using the jQuery <a href="http://datatables.net" rel="nofollow noreferrer">DataTables plug-in</a>. The plug-in seems to be quite a bit unflexible. We've worked around 2 major issues already and are facing a 3rd now:</p>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/DziYj.png" alt="Wireframe"></p>
  
  <p>We're using jQuery templates to render the row contents in conjunction with the knockoutjs <a href="https://github.com/CogShift/Knockout.Extensions" rel="nofollow noreferrer">binding handler by cognitive shift.</a> There seems not to be any way to customize different types of rows or anything in datatables, so cogshift overrides the <code>fnRowCallback</code> to support jQuery templates.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;script id="template" type="text/x-jquery-tmpl"&gt;
      {{if IsDummy()}}
          &lt;td colspan="5" style="background-color:yellow; text-align: center"&gt;
              Entries starting with ${StartLetter}
          &lt;/td&gt;
      {{else}}
          &lt;td&gt;${Id}&lt;/td&gt;&lt;td&gt;${Name}&lt;/td&gt;...
      {{/if}}
  &lt;/script&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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...</p>
  
  <p><strong>Can anyone give me some guidance here?</strong></p>
  
  <p>Update: In the meanwhile I found even more issues:</p>
  
  <ul>
  <li>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.</li>
  <li>The summary of datatables says "Showing 6 of 6 entries" if there are 5 "real" entries because of the dummy entry...</li>
  </ul>