Question

I have a jquery datatable using the following code:

// Test list table
$('#dashboard_testlist_table').dataTable({
    "bJQueryUI": true,
    "bAutoWidth": false,
    "bProcessing": true,
    "aaSorting": [[0, 'asc'], [2, 'asc']],
    "sPaginationType": "full_numbers",
    "sAjaxSource": projectTestListTablePopulateUrl,
    "oLanguage": {
        "sSearch": "Search all columns:"
    },
    "aoColumns": [{
        "sTitle": "Protocol/Test/Case"
    }, {
        "sTitle": "Last Run"
    }, {
        "sTitle": "Last Build/Phase"
    }, {
        "sTitle": "Detail",
    "sClass": "center"
    }, {
        "sTitle": "Owner"
    }]
});  

My server sends back the JSON correctly and the table populates as expected.

The problem that I am having is that I can not do any filtering whatsoever in my table. Any character in the search box immediately filters to no results being displayed. I have used many datatables and this one is driving me crazy.

I have noticed that when I “View Page Source”, there is no rendered html in the source. Here is my original HTML:

<!--Test List Table-->
<table id="dashboard_testlist_table" class="display">
<!--Table Header-->
<thead>
    <tr>
        <th>Protocol/Test/Case</th>
        <th>Last Run</th>
        <th>Last Build/Phase</th>
        <th>Detail</th>
        <th>Owner</th>
    </tr>
</thead>

<tbody>
<!--Table Body, ajax populated, see /media/custom_js/user_dashboard.js -->
</tbody>
</table>

After the page is loaded, it still shows the same. Is the JSON data that was sent supposed to be populated there?

Otherwise, does anyone have any suggestions on what to look for first with filtering this data? I am using jquery datatables 1.6.2.

Answer 1

Actually, the problem ended up being some html that I was passing in the JSON (a link) that was placed into one of the td elements in the table. It was malformed and was causing the headache.