【问题标题】:Datatables - Cannot get Editor to work数据表 - 无法让编辑器工作
【发布时间】:2016-05-08 05:36:43
【问题描述】:

我正在使用以下版本的数据表:

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

不幸的是,我得到一个没有数据的表,如下所示

【问题讨论】:

    标签: php jquery datatables datatables-1.10 jquery-datatables-editor


    【解决方案1】:

    我找到了解决方案。这是修改后的代码。看东西很傻。

          $('#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 }
        ]
    } );
    

    【讨论】:

      猜你喜欢
      • 2018-02-17
      • 1970-01-01
      • 1970-01-01
      • 2017-09-13
      • 1970-01-01
      • 2014-12-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多