Sorting table by every other row Datatables

Question

I'm trying to sort my data with an extra row added for description type data that does NOT need to be sorted. I cannot hide/show this row since it's vital to the rest of the data making any sense.

Is there a way to do this with datatables?

<table>
  <tr>
    <th>Rank Col</th>
    <th>Power Col</th>
    <th>Money Col</th>
  </tr>
  <tr>
    <td colspan=3>Image - Name goes here</td>
  </tr>
  <tr>
    <td>Rank</td>
    <td>Power Level</td>
    <td>Money</td>
  </tr>
  <tr>
    <td colspan=3>Image - Name goes here</td>
  </tr>
  <tr>
    <td>Rank</td>
    <td>Power Level</td>
    <td>Money</td>
  </tr>
  <tr>
    <td colspan=3>Image - Name goes here</td>
  </tr>
  <tr>
    <td>Rank</td>
    <td>Power Level</td>
    <td>Money</td>
  </tr>
  <tr>
    <td colspan=3>Image - Name goes here</td>
  </tr>
  <tr>
    <td>Rank</td>
    <td>Power Level</td>
    <td>Money</td>
  </tr>
</table>

Answer 1

Yes, DataTables does support what you are trying to do, but not in the way that you have shown. You need to add child elements to your rows. An easy way to do this in your example is to utilize a hidden column ( fiddle ):

The HTML

<table id="example" class="display">
    <thead>
      <tr>
        <th>Rank Col</th>
        <th>Power Col</th>
        <th>Money Col</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Rank</td>
        <td>Power Level</td>
        <td>Money</td>
        <td>Image - Name goes here</td>
      </tr>
      <tr>
        <td>Rank</td>
        <td>Power Level</td>
        <td>Money</td>
        <td>Image - Name goes here</td>
      </tr>
      <tr>
        <td>Rank</td>
        <td>Power Level</td>
        <td>Money</td>
        <td>Image - Name goes here</td>
      </tr>
      <tr>
        <td>Rank</td>
        <td>Power Level</td>
        <td>Money</td>
        <td>Image - Name goes here</td>
      </tr>
    </tbody>
</table>

The JavaScript

function addChild ( data ) {

    // data contains all of your information,
    // e.g. data.rank, data.power_level, etc.

    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td colspan="3">' + data.description + '</td>'+
        '</tr>'+
    '</table>';
}

var table = $('#example').DataTable({ 
    "columns": [
      { "data": "rank" },
      { "data": "power_level" },
      { "data": "money" },
      { "data": "description", "visible": false }
    ]
});

// Add children
table.$('tbody tr').each(function() {
    var row = table.row( $(this) );
    row.child( addChild(row.data()) ).show();
});

In the code above, we hide the description column and attach a child table onto the parent table row.