AJAX呼び出しからJSON形式のデータを含む編集可能なテーブルを作成しようとしています。このため私はDatatablesプラグインをFree Datatables Editor(kingkode.com/free-datatables-editor-alternative/)と一緒に使用しています。オープンソースのライブラリしか使えないので、私はDatatables Editorを使うことができません。データテーブルとフリーエディタを使用してテーブルの要素を編集/作成/削除できません
現時点では、自分のsimpleHTTPserverを使用してJSONを提供しています。そのため、リンクはlocalhostを指しています。
テーブルには正しいデータが最初に表示されますが、選択された行の値が未定義であると思われ、確認/送信時にエラーが発生するため、要素の編集/作成/削除はできません。
エラーの画像:
を私が行方不明です何を理解していませんか、間違っているので、正しい軌道に乗ることができたら助けてください!
スクリプト:
$(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>
この怪物は何ですか?あなたがロードデータとレンダリングテーブル関数を必要とすべきではないので、テーブルテーブルがあなたのためにそれを処理します。 'var json = JSON.stringify(eval( '(+ data +') '));' – Ozan
こちらのドキュメントをご覧くださいhttps://datatables.net/examples/data_sources/ajax.html – IWebb
独自のインラインエディタは、20〜30分しか費やさずにデータテーブルに実装できます。 –