1

次のバージョンのデータテーブルを使用しています。

      <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>

これは、API を呼び出して Datatables と Editor に読み込む js ファイルです。

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]

残念ながら、次のようにデータのないテーブルを取得します ここに画像の説明を入力

4

1 に答える 1