jQuery DataTables “No Data Available in Table” and tabled folds when sorting

Question

I have this error now too as per this post ”. and have modified code as per the post, but still getting the "no data Available in Table. In addition, I have added Sort buttons, however, when click the table rolls up and there is no way to un roll it. Not sure why this is not working. Thanks in advance

my jquery functions is

$(function () {
        $.ajax({
          method: "GET",
          url: URL  + '/rents/' + getParameterByName('id') ,
          dataType: "json",
          cache: false,

          })
            .done(function (data) {
         rentResponse = data.rent
         $.each(rentResponse, function(i, item) {

             if (item.activeEntry) {
               var $tr = $('<tr>').append(
                 $('<td>').text(moment(item.datePaid).format ('DD-MMM-YYYY')),
                 $('<td>').text(item.paymentType),
                 $('<td>').text('$'+item.amountPaid),
                 $('<td>').text('$0.00')
              ).appendTo('#datatable tbody')}
         })
          $('#datatable').DataTable();
        })
            .fail(function( xhr, status, errorThrown ) {

                console.log( "Error: " + errorThrown );
                console.log( "Status: " + status );
                console.dir( xhr );
            })
   })

and the HTML is

<table id="datatable" class="table table-striped table-bordered">
    <thead>
      <tr>
       <th>Date</th>
       <th>Payment</th>
       <th>Amount</th>
       <th>Balance</th>
      </tr>
     </thead>
      <tbody>

      </tbody>
   </table>

this is the JSON I m working with

{
  "rent": [
    {
      "_id": "5895a925cf8fd70011ceb6ab",
      "tenantID": "589416dd63998500117d9281",
      "amountPaid": 190,
      "__v": 0,
      "paymentType": "Rent",
      "activeEntry": true,
      "datePaid": "2017-02-11T00:00:00.000Z"
    },
    {
      "_id": "5895a91fcf8fd70011ceb6aa",
      "tenantID": "589416dd63998500117d9281",
      "amountPaid": 190,
      "__v": 0,
      "paymentType": "Rent",
      "activeEntry": true,
      "datePaid": "2017-02-04T00:00:00.000Z"
    },
    {
      "_id": "5895a916cf8fd70011ceb6a9",
      "tenantID": "589416dd63998500117d9281",
      "amountPaid": 190,
      "__v": 0,
      "paymentType": "Rent",
      "activeEntry": true,
      "datePaid": "2017-01-28T00:00:00.000Z"
    },
    {
      "_id": "5895a90ecf8fd70011ceb6a8",
      "tenantID": "589416dd63998500117d9281",
      "amountPaid": 190,
      "__v": 0,
      "paymentType": "Rent",
      "activeEntry": true,
      "datePaid": "2017-01-21T00:00:00.000Z"
    },
    {
      "_id": "5895a902cf8fd70011ceb6a7",
      "tenantID": "589416dd63998500117d9281",
      "amountPaid": 190,
      "__v": 0,
      "paymentType": "Rent",
      "activeEntry": true,
      "datePaid": "2017-01-14T00:00:00.000Z"
    },
    {
      "_id": "5895a8f8cf8fd70011ceb6a6",
      "tenantID": "589416dd63998500117d9281",
      "amountPaid": 190,
      "__v": 0,
      "paymentType": "Rent",
      "activeEntry": true,
      "datePaid": "2017-01-07T00:00:00.000Z"
    }
  ]
}

table when first loaded

table when sort buttons pressed

Datatables has their own ajax as well as column sorting, so I don't know why you're using jQuery's ajax. — A. L, Feb 05 '17 at 08:03
Could you print out a fragment of the data from your ajax call please? — annoyingmouse, Feb 05 '17 at 08:52
try parsing data in ajax done function >> data = JSON.parse(data); — Asad Sarwar, Feb 05 '17 at 08:56
I have tried using the DataTables Ajx method but get the same issue — Scott S, Feb 05 '17 at 09:14

score 1 · Accepted Answer · answered Feb 05 '17 at 11:36

The issue is that you're trying to do too much with your ajax. You could use something like this:

let datatable = $("#datatable").DataTable({
  "ajax": {
    "type": "POST",
    "url": "/echo/json/",
    "dataType": "json",
    "dataSrc": "rent",
    "data": {
      "json": JSON.stringify(jsonData)
    }
  },
  "columns": [{
    "title": "Date",
    "data": "datePaid",
    "render": function(d) {
      return moment(d).format("DD-MMM-YYYY")
    }
  }, {
    "title": "Payment",
    "data": "paymentType"
  }, {
    "title": "Amount",
    "data": "amountPaid",
    "render": function(d) {
      return "$" + d
    }
  }, {
    "title": "Balance",
    "render": function() {
      return "$0.00"
    }
  }]
});

Which lets DataTables do its own thing and KNOW about the data.

Thanks for this, this helped and I got it working, why does the pure Jquery approach not work though — Scott S, Feb 06 '17 at 10:28
Because DataTables keeps a copy of the data to itself so to change it you need to use its API. It takes all sorts of inputs in order the create the table, even a raw HTML table, and then it controls the table. You approach would've worked if you'd've initialized the DataTable after all the data had been downloaded by your ajax and added to the table as HTML. — annoyingmouse, Feb 06 '17 at 12:28

jQuery DataTables “No Data Available in Table” and tabled folds when sorting

1 Answers1

Linked