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>

这是我的 js 文件，它调用我的 API 并读入数据表和编辑器：

变量编辑器；// 在示例中使用全局提交和返回数据呈现

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

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 }
    ]
} );
于 2016-05-08T06:31:45.243 回答