Fixed headers not working on Ajax loaded table

justdietnow

SCRIPT

var $jq = jQuery.noConflict();

$jq(document).ready( function () {
    var table = $jq('#JDN').dataTable( {
        fixedHeader: true,
        ajax: "/images/starbuckstest.txt",
        responsive: true,
        "paginate": true,
        "lengthMenu": [[50, 100, 200, -1], [50, 100, 200, "All"]],
        "bSort": false,
        "order": [],
        "columns": [
             {"data": "Items"},
             {"data": "Smart Points"},
             {"data": "Points Plus"},
             {"data": "Points"},
             {"data": "Serving Size"},
             {"data": "Calories"},
             {"data": "Fat Calories"},
             {"data": "Fat"},
             {"data": "Sat Fat"},
             {"data": "Cholesterol"},
             {"data": "Sodium"},
             {"data": "Carbs"},
             {"data": "Fiber"},
             {"data": "Sugars"},
             {"data": "Protein"}
             ]
        
        } );
            new $jq.fn.dataTable.FixedHeader( table );
        } );
</script>

<table id="JDN" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th class="all">Items</th>
<th class="all">Smart Points®</th>
<th class="all">Points Plus®</th>
<th class="desktop">Points®</th>
<th class="desktop">Serving Size</th>
<th class="desktop">Calories</th>
<th class="desktop">Fat Calories</th>
<th class="desktop">Fat</th>
<th class="desktop">Sat Fat</th>
<th class="desktop">Cholesterol</th>
<th class="desktop">Sodium</th>
<th class="desktop">Carbs</th>
<th class="desktop">Fiber</th>
<th class="desktop">Sugars</th>
<th class="desktop">Protein</th>
</tr>
</thead>
</table>

In every other page I have it working but not processed using AJAX.

http://www.justdietnow.com/test.html