jQuery DataTables“表中没有可用数据”和排序时折叠答案

【问题标题】：jQuery DataTables “No Data Available in Table” and tabled folds when sortingjQuery DataTables“表中没有可用数据”和排序时折叠
【发布时间】：2017-06-22 07:52:24
【问题描述】：

我现在也有这个错误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

【问题讨论】：

Datatables有自己的ajax以及列排序，所以我不知道你为什么用jQuery的ajax。
您能打印出您的 ajax 调用中的数据片段吗？
尝试在 ajax done 函数中解析数据 >> data = JSON.parse(data);
我尝试过使用 DataTables Ajx 方法，但遇到了同样的问题

标签： javascript jquery datatables

【解决方案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 可以做自己的事情并了解数据。

【讨论】：

谢谢，这有帮助，我得到了它的工作，为什么纯 Jquery 方法不起作用
因为 DataTables 会为自己保留一份数据副本，所以要更改它，您需要使用它的 API。它需要各种输入来创建表格，甚至是原始 HTML 表格，然后它控制表格。如果您在 ajax 下载所有数据并作为 HTML 添加到表中之后初始化 DataTable，那么您的方法会起作用。