Jquery datatables Plug-In , display “No data available in table” after Sorting/Filtering Data

Question

I use JSON format for getting data from server to fill DataTables table. In Success part of $().ajax function , I checked and the response is getting back successfuly. this is the Fiddle for my table :

The sample of Json file returning back from server is like this :

{
    "data": [
        {
            "__type": "TEST1.Campaign",
            "BookingID": 0,
            "CatalogueNumber": "IEM201343000007",
            "CampaignId": 34,
            "StartTime": "/Date(1438437600000)/",
            "EndTime": "/Date(1440079200000)/",
            "DurationPlayout": 3,
            "AdDuration": 5,
            "CampaignType": "facebook",
            "Stations": [
                "7mate.brisbane.au",
                "eleven.brisbane.au",
                "nine.brisbane.au"
            ],
            "Client_ID": 192,
            "ContactID": 5851,
            "AdvertiserID": 9228,
            "Active": true,
            "SModified": null,
            "DSP": "SiteScout",
            "ClientName": "",
            "AdvertiserName": "H A Consulting",
            "ContactName": "Aisling Bannan"
        }
    ] }

I'm creating the table manually after ajax response, so Is there any issue with datatables in this way? when I filter or Sort the table records by a column , this issue happens:

---

No data available in table

---

Any Help would be appreciated.

12/08/2015 Updated Code:

I updated the code in this fiddle link based on Gyrocode's answer.
1)when I click refresh button, the table is initializing again,but it will be empty when I click sort columns or want to search data.
2)the width of each column is not set correctly.
3)some columns are hidden but they're shown in the table at the end of each row.
4)Also for using Orthogonal data , I need to have datetime in MM/DD/YY, I used .Net datetime for this field , but it seems it changed to TimeStamp in JSON string at Client-side.so, is there any way to make it in custome format?

Answer 1

CAUSE

There are many syntax errors and other issues with your code, this answer would be too long to list them all.

Important things to consider are:

• Need to use the correct number of th that includes the hidden columns as well. Use columnDefs later to hide certain columns.
• Your approach with generating tr / td is OK but makes the code complex. DataTables can send ajax request for you and will handle returned data for you with correct configuration. See Orthogonal data example for more information.

DEMO

Please see updated jsFiddle for demonstration of corrected code.