1

Я использую follwing версию DataTables:DataTables - Невозможно получить редактор для работы

 <script src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script> 

И следующую версию редактора, кнопок и выберите:

<script type="text/javascript" src="/jquery/Editor-PHP-1.5.5/js/dataTables.editor.js"></script> 
    <script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script> 
    <script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script> 

Это мой файл JS, который вызывает мой API и читает в Datatables и Editor:

редактор var; // использовать глобальную для представления данных возврата и возврата в примерах

$(document).ready(function() { 
editor = new $.fn.dataTable.Editor({ 
    ajax: { 
     create: { 
      type: 'POST', 
      url: '../php/rest/create.php' 
     }, 
     edit: { 
      type: 'PUT', 
      url: '../php/rest/edit.php?id=_id_' 
     }, 
     remove: { 
      type: 'DELETE', 
      url: '../php/rest/remove.php?id=_id_' 
     } 
    }, 
    table: "#list_blogs_table", 
    fields: [ { 
         label:   'entry_id', 
         name:   'entry_id' 
         }, 

              { 
         label:   'entry_name', 
         name:   'entry_name' 
         }, 
               { 
         label:   'entry_body', 
         name:   'entry_body' 
         }, 
               { 
         label:   'entry_date', 
         name:   'entry_date' 
         }, 
               { 
         label:   'status', 
         name:   'status' 
         }, 
               { 
         label:   'created_timestamp', 
         name:   'created_timestamp' 
         }, 
               { 
         label:   'updated_timestamp', 
         name:   'updated_timestamp' 
         }, 
    ] 
}); 

$('#list_blogs_table').DataTable({ 
    dom: "Bfrtip", 
    url: "http://www.example.com/api/v1/blog/blogs/format/json", 
    dataSrc: "message", 
    columns: [ 
     { data: "entry_id" }, 
     { data: "entry_name" }, 
     { data: "entry_body" }, 
     { data: "entry_date" }, 
     { data: "status" }, 
     { data: "created_timestamp" }, 
     { data: "updated_timestamp" }, 
    ], 
    select: true, 
    buttons: [ 
     { extend: "create", editor: editor }, 
     { extend: "edit", editor: editor }, 
     { extend: "remove", editor: editor } 
    ] 
}); 

});

Это мой HTML:

<table id="list_blogs_table" class="table table-hover table-striped table-bordered"> 
        <thead> 
         <tr> 
          <th>Id</th> 
          <th>Title</th> 
          <th>Article Text</th> 
          <th>entry_date</th> 
          <th>Status</th> 
          <th>Created</th> 
          <th>Updated</th> 

         </tr> 
        </thead> 
        <tfoot> 
          <th>Id</th> 
          <th>Title</th> 
          <th>Article Text</th> 
          <th>entry_date</th> 
          <th>Status</th> 
          <th>Created</th> 
          <th>Updated</th> 
        </tfoot> 
        <tbody> 
        </tbody> 
       </table> 

Вот мой файл в формате JSON (сократили его)

{ 
"status": "success", 
"message": [{ 
    "entry_id": "1", 
    "entry_name": "12345678", 
    "entry_body": "this is just the beginning update", 
    "entry_date": "2016-05-02 20:13:12", 
    "status": "active", 
    "created_timestamp": "2016-05-01 21:25:51", 
    "updated_timestamp": "2016-05-01 21:25:51" 
}, { 
    "entry_id": "2", 
    "entry_name": "one one one", 
    "entry_body": "this is just the beginning update 1", 
    "entry_date": "2016-05-02 20:13:16", 
    "status": "active", 
    "created_timestamp": "2016-05-02 14:44:03", 
    "updated_timestamp": "2016-05-01 21:25:51" 
}, 
    [snip] 

К сожалению, я получаю таблицу без данных следующим образом enter image description here

ответ

0

Я нашел решение. Вот пересмотренный код. Глупый взгляд на вещи.

 $('#list_blogs_table').DataTable({ 
    dom: "Bfrtip", 

    "ajax": { 
     "url": "http://www.example.com/api/v1/blog/blogs/format/json", 
     "dataSrc": "message", 
    }, 

    columns: [ 
     { data: "entry_id" }, 
     { data: "entry_name" }, 
     { data: "entry_body" }, 
     { data: "entry_date" }, 
     { data: "status" }, 
     { data: "created_timestamp" }, 
     { data: "updated_timestamp" }, 
    ], 
    select: true, 
    buttons: [ 
     { extend: "create", editor: editor }, 
     { extend: "edit", editor: editor }, 
     { extend: "remove", editor: editor } 
    ] 
});