排序时的jQuery DataTables“表格中无数据"和表格折叠 [英] jQuery DataTables “No Data Available in Table” and tabled folds when sorting

问题描述

我现在也有此错误，如根据此帖子".并根据帖子修改了代码，但仍然得到表中没有可用数据.此外，我添加了排序按钮，但是，当单击表时，无法展开它.不知道为什么这是行不通的.提前谢谢

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

我的jquery函数是

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

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

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

表在首次加载时

按下排序按钮时的表

推荐答案

问题是您试图对ajax进行过多处理.您可以使用类似此:

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"
    }
  }]
});

这让DataTables做自己的事情，并且了解有关数据.

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

这篇关于排序时的jQuery DataTables“表格中无数据"和表格折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！