2016-08-12 13 views
2

AJAX呼び出しからJSON形式のデータを含む編集可能なテーブルを作成しようとしています。このため私はDatatablesプラグインをFree Datatables Editor(kingkode.com/free-datatables-editor-alternative/)と一緒に使用しています。オープンソースのライブラリしか使えないので、私はDatatables Editorを使うことができません。データテーブルとフリーエディタを使用してテーブルの要素を編集/作成/削除できません

現時点では、自分のsimpleHTTPserverを使用してJSONを提供しています。そのため、リンクはlocalhostを指しています。

テーブルには正しいデータが最初に表示されますが、選択された行の値が未定義であると思われ、確認/送信時にエラーが発生するため、要素の編集/作成/削除はできません。

エラーの画像:

削除 - 作成し、その値が Delete - seems that value is undefined

定義されていないようだ - エラーメッセージ
Create - Error message

を私が行方不明です何を理解していませんか、間違っているので、正しい軌道に乗ることができたら助けてください!

スクリプト:

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

この怪物は何ですか?あなたがロードデータとレンダリングテーブル関数を必要とすべきではないので、テーブルテーブルがあなたのためにそれを処理します。 'var json = JSON.stringify(eval( '(+ data +') '));' – Ozan

+0

こちらのドキュメントをご覧くださいhttps://datatables.net/examples/data_sources/ajax.html – IWebb

+0

独自のインラインエディタは、20〜30分しか費やさずにデータテーブルに実装できます。 –

答えて

2

私はdataTables.altEditor.free.jsのコードをチェックして、本当に配列の配列をデータとして使うべきか、それがうまくいかないことに気付きました。だから、あなたのための2つの方法があります。

  1. 書き換え一部dataTables.altEditor.free.js
  2. 再編の部品あなたのデータは、それがここにあるように:http://jsfiddle.net/rmcmaster/bbLjzspf/22/
+0

ああ、私は私がデータフォーマットを変えることができないと思うので、私はエディタを書き直そうとします。あなたの答えをありがとう。 – BaconPancakes

関連する問題