Question

我正在使用后端laravel框架构建应用程序，该框架将一些数据发送到前端并使用DataTables进行渲染。在后端，我使用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>

该表总共有5,687个条目，问题在于它并不总是能够按预期方式呈现。例如，当我第一次加载页面时，我得到的DataTables warning: table id=table - Ajax error似乎找不到。

然后，如果我从第一次失败算起3秒钟，然后再次按刷新，则表将按预期加载。

对此有什么解释吗？是时间问题吗？

欢迎任何想法！

Answer 1

尝试添加这样的ajax调用

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

还添加错误回调并查看返回的结果：

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

Answer 2

实际上，我是这样加载并工作的：

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

DataTables奇怪的Ajax错误并不总是发生

2 个答案: