无法使用 jQuery .post() 使数据表工作

Question

我正在处理一个表单，用户可以在其中选择一个日期范围，以便使用 DataTables 显示信息。

当用户点击按钮时，日期通过 jQuery .post() 函数发送，并按预期检索信息。

下面是与之相关的一段代码：

//Sending the dates range
$.post(url_route, datos, function(data,status){
    if(status=='success'){
       var response = jQuery.parseJSON(data);
       //checking if data were found
       if(response.list_events.length === 0){
          console.log('No data available');
       }
       else{
         //Let us display the info with DataTables inside div #list_events and 
         //table #table_id
         $('#list_events').html('<table class="table table-striped table-hover" id="table_id"></table>');
         $('#list_events table').append('<thead><tr><th>Event</th><th>Type</th><th>Attendance</th><th>Coordinators</th><th>Participants</th><th>Institutes</th><th>Talks</th></tr></thead><tbody></tbody>');
         //retrieving the info for each row and append it to the table:
         $.each(response.list_events,function(i,item)
         {
           $('#list_events').find('tbody').append('<tr>');
           $('#list_events').find('tbody').append('<td>'+item.Event+'</td>');
           $('#list_events').find('tbody').append('<td>'+item.Type+'</td>');
            $('#list_events').find('tbody').append('<td>'+item.Attendance+'</td>');
          $('#list_events').find('tbody').append('<td>'+item.Coordinator+'</td>');
          $('#list_events').find('tbody').append('<td>'+item.Participant+'</td>');
           $('#list_events').find('tbody').append('<td>'+item.Institute+'</td>');
           $('#list_events').find('tbody').append('<td>'+item.Talk+'</td>');
        });//end of each

        //initializing DataTables
        var table = $('#table_id').DataTable(); 

       }//end of else (info found)
    }//end of if success
}//end of post()

到目前为止，数据表中显示了信息，但还不能完全正常工作，因为只显示了信息。 DataTables 搜索、下一个和上一个按钮以及结果数下拉菜单未显示。

在 console.log 中出现以下错误：

Uncaught TypeError: Cannot read property 'length' of undefined

有什么想法吗？任何人都可以阐明这一点吗？

已解决

问题出在追加函数上。如果我只键入一个仅包含 <tr> 的追加，如下所示：

$('#list_events').find('tbody').append('<tr>');

HTML中的结果是<tr></tr>也就是说标签自动关闭了……不管怎样。因此，解决方案是将 all 添加到 one 行中，如下所示：

$('#list_events').find('tbody').append('<tr><td>'+item.Event+'</td><td>'+item.Type+'</td><td>'+item.Attendance+'</td><td>'+item.Coordinator+'</td><td>'+item.Participant+'</td><td>'+item.Institute+'</td><td>'+item.Talk+'</td></tr>');

就是这样了☺

Answer 1

我的第一个想法是 "response.list_events" 可能未定义。当然是你的错误：

"Uncaught TypeError: Cannot read property 'length' of undefined"

似乎暗示了这一点。

我的第二个想法是，我最近做了类似的事情，我在使用 .post 方法时遇到了麻烦，并发现使用 .ajax 方法成功了。
尝试以下方法：

$.ajax({
    type: "POST",
    url: url_route,
    data: datos,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(returned_from_server){
         // your function here
    }
});

我的第三个想法是我没有看到您将结束行标签放在哪里。

$.each(response.list_events,function(i,item)
     {
      $('#list_events').find('tbody').append('<tr>');
      $('#list_events').find('tbody').append('<td>'+item.Event+'</td>');
      $('#list_events').find('tbody').append('<td>'+item.Type+'</td>');
      $('#list_events').find('tbody').append('<td>'+item.Attendance+'</td>');
      $('#list_events').find('tbody').append('<td>'+item.Coordinator+'</td>');
      $('#list_events').find('tbody').append('<td>'+item.Participant+'</td>');
      $('#list_events').find('tbody').append('<td>'+item.Institute+'</td>');
      $('#list_events').find('tbody').append('<td>'+item.Talk+'</td>');
      $('#list_events').find('tbody').append('</tr>');  // <--- I believe you might be missing this!!
    });//end of each

希望这对您有所帮助。

Answer 2

如果您使用远程数据源，让 DataTables 本身为您呈现数据会更加优雅和高效。

在您的示例中，您获取数据，构建 table，然后将其转换为 "DataTable"。如果它满足要求并完成了工作，那么你已经编写了非常好的代码，你不应该再阅读这个答案！

但 DataTables 本身非常聪明，可以呈现与 DOM 分离的数据，然后将其全部放置到位。您将受益于更高效的更新，同时拥有更简洁的代码。

这是一个基本示例。如果不在您的环境中对其进行测试，我不能肯定它会完成您的工作，但我认为它应该：

var myTable = $('#table_id').DataTable( {
  "ajax": {
    "url": url_route,
    "data": function(customData) {
      customData.datos = datos // need some way to have access to datos
    }
  }
});

然后在单击时，如果您想根据更改的内容（日期范围？）检索更新的数据，您只需重新绘制即可。

myTable.draw();

我可以想像出几种获取数据的方法——将其包装在一个接受和使用数据的函数中。声明一个命名空间或其他准全局变量（如果你是那个人，则实际上是全局变量！） myTable 可以在任何给定时间点访问的变量......或者甚至只是销毁当前 table 并调用再整DataTable()就可以了。

无法使用 jQuery .post() 使数据表工作

Can't make DataTables work by using jQuery .post()

javascript

datatable

jquery

.post