jQuery DataTables“表中沒有可用數據”和排序時的表折疊

Question

根據這篇文章，我現在也有此錯誤”。 並根據帖子修改了代碼，但仍然得到“表中沒有可用數據。此外，我添加了排序按鈕，但是，當單擊表時，無法展開它。不知道為什么這不起作用，請先謝謝

我的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"
    }
  ]
}

首次加載時的表格

按下排序按鈕時的表格

Answer 1

問題是您試圖對ajax進行過多處理。 您可以使用如下所示的內容 ：

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可以做自己的事情，並且了解數據。