无法使用Datatables和免费编辑器编辑/创建/删除表中的元素 [英] Cannot edit/create/delete elements in table using Datatables and free editor

问题描述

我正在尝试使用AJAX调用的JSON格式的数据构建可编辑的表格。为此，我正在使用Datatables插件和免费数据编辑器（kingkode.com/free-datatables-editor-alternative/）。我不能使用数据表编辑器，因为我只能使用开源的库。

I am trying to build an editable table with data in JSON format from an AJAX call. For this I am using the Datatables plugin together with the Free Datatables Editor (kingkode.com/free-datatables-editor-alternative/). I can't use the Datatables Editor because i can only use libraries that are open source.

目前我只是使用我自己的simpleHTTPserver来提供JSON，是为什么链接指向本地主机。

At the moment I am just using my own simpleHTTPserver to provide the JSON, which is why the link is pointing to localhost.

该表最初显示正确的数据，但我无法编辑/创建/删除任何元素，因为选定的行似乎是未定义的，它在确认/提交时提供错误。

The table shows the correct data initially, but i cannot edit/create/delete any of the elements, as the value of the selected row seems to be undefined and it provides an error on confirm/submit.

图片错误：

删除 - 似乎值未定义

创建 - 错误消息

Create - Error message

我不明白我失踪或做错了，所以任何帮助，可以让我在右边轨道会很棒！

I don't understand what I am missing or doing wrong, so any help that can get me on the right track would be great!

脚本：

    $(document).ready(function() {

var columnDefs = [{
    title: "NTP Servers",
    data: "ntp_server"
  }];

//Table creation
var myTable = $('#testTableData').dataTable({
  "ajax": "http://localhost:6112/data.php",
  columns: columnDefs,
    dom: 'Bfrltip',        
    select: 'single',
    responsive: true,
    altEditor: true,     
    buttons: [{
            text: 'Create',
            name: 'add'        
          },
          {
            extend: 'selected', 
            text: 'Edit',
            name: 'edit'        
          },
          {
            extend: 'selected', 
            text: 'Delete',
            name: 'delete'      
          },]
        });
});

HTML：

  <form id="fe">
    <div class="container">

      <h1>Data Table - Network/Time</h1>
      <table class="dataTable table table-striped" id="testTableData">
      </table>

    </div>
  </form>

JSON数据示例：

{
    "data": [{
        "DT_RowId": 0,
        "ntp_server": "1.openwrt.pool.ntp.org"
    }, {
        "DT_RowId": 1,
        "ntp_server": "2.openwrt.pool.ntp.org"
    }, {
        "DT_RowId": 2,
        "ntp_server": "3.openwrt.pool.ntp.org"
    }]
}

我包含的库：

 <script src="libs/js/jquery.js"></script>
  <script src="libs/js/bootstrap.min.js"></script>
  <script src="libs/js/jquery.dataTables.min.js"></script>
  <script src="libs/js/dataTables.bootstrap.min.js"></script>
  <script src="libs/Buttons-1.2.2/js/dataTables.buttons.min.js"></script>
  <script src="libs/Buttons-1.2.2/js/buttons.bootstrap.min.js"></script>
  <script src="libs/Select-1.2.0/js/dataTables.select.min.js"></script>
  <script src="libs/js/altEditor/dataTables.altEditor.free.js"></script>

推荐答案

我已经检查了 dataTables.altEditor.free.js ，看到你真的应该使用数组的数组作为数据，否则它将无法正常工作。所以你有两种方法：

I have check the code in dataTables.altEditor.free.js and saw that you really should use an array of arrays as data or it will not work. So there are two Ways for you:

1. 重写 dataTables.altEditor.free.js


2. 重新构建您的数据，如下所示： http ：//jsfiddle.net/rmcmaster/bbLjzspf/22/

1. rewrite some parts of dataTables.altEditor.free.js
2. restructure your data like it is here: http://jsfiddle.net/rmcmaster/bbLjzspf/22/

这篇关于无法使用Datatables和免费编辑器编辑/创建/删除表中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！