无法使用 jQuery .post() 使 DataTables 工作

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 中，但它并不完全有效，因为只显示信息。 DataTables 的搜索、下一个和上一个按钮以及结果数下拉菜单均未显示。

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

未捕获的类型错误：无法读取未定义的属性“长度”

有什么想法吗？任何人都可以对此有所了解吗？

已解决

问题出在附加功能上。 如果我只键入一个仅带有 <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”可能是未定义的。当然是你的错误：

“未捕获的类型错误：无法读取未定义的属性‘长度’”

似乎暗示了这一点。

我的第二个想法是，我最近做了类似的事情，我在 .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 自己为您呈现数据会更加优雅和高效。

在您的示例中，您获取数据、构建表，然后将其转换为“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();

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