DataTables Curious Ajax ошибка, которая не всегда происходит

Question

Я создаю приложение, использующее в качестве внутреннего фреймворка Laravel, которое отправляет некоторые данные во внешний интерфейс и отображает их с использованием DataTables.В конце я использую плагин laravel * yara , и код выглядит так:

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 секунды с этого первого сбоя и снова нажму кнопку обновить,таблица загружается, как и ожидалось.

Есть ли объяснение этому?Это проблема времени?

Любая идея приветствуется!

Answer 1

На самом деле я загрузил вот так и работал:

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

Answer 2

попробуйте добавить вызов ajax следующим образом

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

Также добавьте обратный вызов ошибки и посмотрите, что он возвращает:

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