javascript - 无法使用 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>也就是说，标签是自动关闭的……不管怎样。因此，解决方案是将所有 附加内容放在一个 行中，如下所示:

$('#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 

希望这对您有所帮助。