jQuery DataTables «Нет данных, доступных в таблице» и отображаемых складок при сортировке

Question

У меня эта ошибка теперь также как per this post ». и изменили код в соответствии с сообщением, но все еще получают «нет данных, доступных в таблице». Кроме того, я добавил кнопки «Сортировка», однако, когда щелкнет стол, свертывается, и нет возможности его отменить. Не знаете, почему это не работает. Спасибо заранее

мои функции JQuery является

$(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); 
      }) 
    }) 

и HTML является

<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> 

это JSON я работаю с

{ 
    "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

Answer 1

Вопрос заключается в том, что вы пытаетесь сделать слишком много с AJAX. Вы можете использовать что-то вроде 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" 
    } 
    }] 
}); 

Что позволяет DataTables делать свою собственную вещь и ЗНАТЬ о данных.