X-Editable 通过 JSON 使用 DataTable

Question

请我有一个 html 表，我想通过 AJAX 从数据库加载 JSON 数据，并使用 X-Editable 库实现内联编辑，但加载后无法直接编辑单元格

<table id="curtable" data-toggle="table" data-pagination="true" data-search="true" data-show-columns="true" data-show-pagination-switch="true" data-show-refresh="true" data-key-events="true" data-show-toggle="true" data-resizable="true" data-cookie="true"
                                                                data-cookie-id-table="saveId" data-show-export="true" data-click-to-select="true" data-toolbar="#toolbar">
                                                                <thead>
                                                                    <tr>
                                                                        <th data-field="Description" data-editable="true">Description</th>
                                                                        <th data-field="ShortName" data-editable="true">Short Name</th>
                                                                        <th data-field="Symbol" data-editable="true">Symbol</th>
                                                                        <th data-field="Country" data-editable="true">Country</th>
                                                                        <th data-field="Active" >Active</th>
                                                                        <th data-field="isFuntional">Functional</th>
                                                                        <th data-field="ExRate" data-editable="true">Rate</th>
                                                                    </tr>
                                                                </thead>

                                                            </table>

下面是AJAX调用，调用后我无法点击任何单元格进行编辑，但是当我使用tr和td标签手动输入数据时，我可以编辑单元格

            $.ajax({
            url: 'RhemaServices.asmx/GetCurrencies',
            type: 'POST',
            dataType: 'json',
            contentType: "application/json; charset-utf-8",
            success: function (data) {
                datatableVariable = $('#curtable').DataTable({
                    data: data,
                    responsive: true,
                    columns: [
                        { 'data': 'Description' },
                        { 'data': 'ShortName' },
                        { 'data': 'Symbol' },
                        { 'data': 'Active' },
                        { 'data': 'isFuntional' },
                        { 'data': 'ExRate' }

                    ],

                    //,
                    columnDefs: [
                        {
                            "targets": 4,
                            render: function (data, type, row) {
                                if (data === true) { return "Yes" } else { return "No" }
                            }
                        },
                        {
                            "targets": 5,
                            render: function (data, type, row) {
                                if (data === true) { return "Yes" } else { return "No" }
                            }
                        }
                    ]

                });
            }

        });

Answer 1

Datatables 内置了处理 ajax 的功能https://datatables.net/reference/option/ajax

datatableVariable = $('#curtable').DataTable({
  ajax: {
    url: 'RhemaServices.asmx/GetCurrencieso',
    type: "POST",
  },
  columns: [
    {
      data: 'Description',
    },
    {
      data: 'ShortName',
    },
    {
      data: 'Symbol',
    },
    {
      data: 'Active',
    },
    {
      data: 'isFuntional',
      render: function(data, type, row, meta){ 
        if(type === 'display'){ 
          data = '<a href="#" data-name="isFuntional" class="editable" data-type="text" data-pk="'+row.ID+'" data-url="ajax/ajax_url_here" data-title="Enter isFuntional">'+data+'</a>';
        }
        return data;
      }
    },
    {
      data: 'ExRate',
      render: function(data, type, row, meta){ 
        if(type === 'display'){ 
          data = '<a href="#" data-name="ExRate" class="editable" data-type="text" data-pk="'+row.ID+'" data-url="ajax/ajax_url_here" data-title="Enter ExRate">'+data+'</a>';
        }
        return data;
      }
    },
  ],
  fnDrawCallback: function( oSettings ) {
    $('.editable').editable({
      success: function(response, newValue) {
        if(response.status == 'error') return response.msg; //msg will be shown in editable form
      },
      error: function(response, newValue) {
        if(response.status === 500) {
          return 'Service unavailable. Please try later.';
        } else {
          return response.responseText;
        }
      }
    });
  }
});

在 ajax 调用中，您需要在一个名为 data 的单元格中传递一个带有 json 数据的关联数组

例子

echo json_encode(array('status' => 'success', 'data' => $allSubmissions))