数据表好奇的Ajax错误并不总是出现

Posted 2023-01-17

我使用的是后端laravel框架，发送一些数据到前端，并使用数据表使他们构建应用程序。在后端我使用yara's laravel plugin和代码如下：

public function getData()
    
        return datatables()->query(DB::table('data'))->toJson();
    

在现在的前端，我有这个简单的代码来渲染表：

<table class="table table-bordered" id="table">
               <thead>
                  <tr>
                    <th>id</th>
                    <th>GSE</th>   
                    <th>Species</th>
                    <th>Entity</th>
                    <th>Technology</th> 
                    <th>Type</th>
                    <th>Samples</th>
                    <th>Duplicates</th>
                    <th>Diseases</th>
                    <th>ParentNode</th>
                    <th>ChildNode</th>
                    <th>datapath</th>
                    <th>DOlink</th>
                    <th>dsetLink</th>
                    <th>Annot</th>
                    <th>Title</th>  
                  </tr>
               </thead>
            </table>
         </div>
       <script>
         $(function() 
           $('#table').DataTable(
               serverSide: true,
               processing: true,
               ajax: 'http://localhost:8181/getData',
               columns: [
                         data: 'id', name: 'id' ,
                         data: 'GSE', name: 'GSE' ,
                         data: 'Species', name: 'Species' ,
                         data: 'Entity', name: 'Entity' ,
                         data: 'Technology', name: 'Technology' ,
                         data: 'Type', name: 'Type' ,
                         data: 'Samples', name: 'Samples' ,
                         data: 'Duplicates', name: 'Duplicates' ,
                         data: 'Diseases', name: 'Diseases' ,
                         data: 'ParentNode', name: 'ParentNode' ,
                         data: 'ChildNode', name: 'ChildNode' ,
                         data: 'DataPath', name: 'DataPath' ,
                         data: 'DOLink', name: 'DOLink' ,
                         data: 'Dsetlink', name: 'Dsetlink' ,
                         data: 'Annot', name: 'Annot' ,
                         data: 'Title', name: 'Title' 
                     ]
            );
         );
         </script>

该表总共有5687项，问题是，它并不总是得到预期呈现。例如，当我加载页面第一次我得到这似乎是一个没有找到一个DataTables warning: table id=table - Ajax error。

然后，如果我从计数3秒首次失败，并再次按刷新按预期的表被加载。

是否有任何解释？它是一个时间的问题？

任何想法表示欢迎！

答案

尝试添加这样的Ajax调用

ajax: 
            url: "http://localhost:8181/getData",
            type: "POST"
        ,

还添加了错误回调，看看它返回：

error: function (xhr, error, thrown) 
                error( xhr, error, thrown );
            

另一答案

其实我加载像这样与合作：

$.ajax(
                url: "http://localhost:8181/getData",
                type: "GET",
                success : function (resp)
                    // adding data to datatables
                    // if column_data is 1 row
                     $('#table').dataTable(
                        columns: [
                         data: 'id', name: 'id' ,
                         data: 'GSE', name: 'GSE' ,
                         data: 'Species', name: 'Species' ,
                         data: 'Entity', name: 'Entity' ,
                         data: 'Technology', name: 'Technology' ,
                         data: 'Type', name: 'Type' ,
                         data: 'Samples', name: 'Samples' ,
                         data: 'Duplicates', name: 'Duplicates' ,
                         data: 'Diseases', name: 'Diseases' ,
                         data: 'ParentNode', name: 'ParentNode' ,
                         data: 'ChildNode', name: 'ChildNode' ,
                         data: 'DataPath', name: 'DataPath' ,
                         data: 'DOLink', name: 'DOLink' ,
                         data: 'Dsetlink', name: 'Dsetlink' ,
                         data: 'Annot', name: 'Annot' ,
                         data: 'Title', name: 'Title' 
                     ]
                     ).fnAddData(resp.data);
                ,
                error: function(jqXHR, textStatus, ex) 
                  console.log(textStatus + "," + ex + "," + jqXHR.responseText);
                
            );