使用Datatables和免費編輯器無法編輯/創建/刪除表格中的元素

我想從AJAX調用中以JSON格式的數據構建可編輯表格。爲此，我將Datatables插件與免費數據表編輯器（kingkode.com/free-datatables-editor-alternative/）結合使用。我無法使用Datatables Editor，因爲我只能使用開源的庫。使用Datatables和免費編輯器無法編輯/創建/刪除表格中的元素

目前我只是使用我自己的simpleHTTPserver來提供JSON，這就是爲什麼鏈接指向本地主機。

該表最初顯示正確的數據，但我無法編輯/創建/刪除任何元素，因爲所選行的值似乎未定義，並且提供了有關確認/提交的錯誤。

圖片的錯誤：

刪除 - 似乎值爲undefined

創建 - 錯誤消息

我不明白我丟失或做錯了，所以任何可以讓我走上正軌的幫助將會非常棒！

腳本：

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

來源

2016-08-12 BaconPancakes

這是什麼怪物？ 'var json = JSON.stringify（eval（'（'+ data +'）'））;' – Ozan

您不應該需要加載數據和渲染表函數，表格表將爲您處理。在這裏查看文檔https://datatables.net/examples/data_sources/ajax.html – IWebb

您只需花費20到30分鐘就可以在datatable中實現自己的內聯編輯器。 –

我檢查了dataTables.altEditor.free.js中的代碼，發現你確實應該使用一組數組作爲數據，否則它將無法工作。因此，有兩種方法給你：

重寫dataTables.altEditor.free.js
重組的數據某些部分像它是在這裏：http://jsfiddle.net/rmcmaster/bbLjzspf/22/

來源

2016-08-12 10:34:19 Veas

啊哈，我會嘗試重寫編輯器，因爲我不認爲我可以更改數據格式。謝謝您的回答。 – BaconPancakes

使用Datatables和免費編輯器無法編輯/創建/刪除表格中的元素

回答

相關問題