次のバージョンのデータテーブルを使用しています。
<script src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
そして、次のバージョンのエディター、ボタン、および選択:
<script type="text/javascript" src="/jquery/Editor-PHP-1.5.5/js/dataTables.editor.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
これは、API を呼び出して Datatables と Editor に読み込む js ファイルです。
var エディター; // 例では、送信および戻りデータのレンダリングにグローバルを使用します
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: {
create: {
type: 'POST',
url: '../php/rest/create.php'
},
edit: {
type: 'PUT',
url: '../php/rest/edit.php?id=_id_'
},
remove: {
type: 'DELETE',
url: '../php/rest/remove.php?id=_id_'
}
},
table: "#list_blogs_table",
fields: [ {
label: 'entry_id',
name: 'entry_id'
},
{
label: 'entry_name',
name: 'entry_name'
},
{
label: 'entry_body',
name: 'entry_body'
},
{
label: 'entry_date',
name: 'entry_date'
},
{
label: 'status',
name: 'status'
},
{
label: 'created_timestamp',
name: 'created_timestamp'
},
{
label: 'updated_timestamp',
name: 'updated_timestamp'
},
]
} );
$('#list_blogs_table').DataTable( {
dom: "Bfrtip",
url: "http://www.example.com/api/v1/blog/blogs/format/json",
dataSrc: "message",
columns: [
{ data: "entry_id" },
{ data: "entry_name" },
{ data: "entry_body" },
{ data: "entry_date" },
{ data: "status" },
{ data: "created_timestamp" },
{ data: "updated_timestamp" },
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
これは私のHTMLです:
<table id="list_blogs_table" class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th>Article Text</th>
<th>entry_date</th>
<th>Status</th>
<th>Created</th>
<th>Updated</th>
</tr>
</thead>
<tfoot>
<th>Id</th>
<th>Title</th>
<th>Article Text</th>
<th>entry_date</th>
<th>Status</th>
<th>Created</th>
<th>Updated</th>
</tfoot>
<tbody>
</tbody>
</table>
これが私のJSONファイルです(短縮されています)
{
"status": "success",
"message": [{
"entry_id": "1",
"entry_name": "12345678",
"entry_body": "this is just the beginning update",
"entry_date": "2016-05-02 20:13:12",
"status": "active",
"created_timestamp": "2016-05-01 21:25:51",
"updated_timestamp": "2016-05-01 21:25:51"
}, {
"entry_id": "2",
"entry_name": "one one one",
"entry_body": "this is just the beginning update 1",
"entry_date": "2016-05-02 20:13:16",
"status": "active",
"created_timestamp": "2016-05-02 14:44:03",
"updated_timestamp": "2016-05-01 21:25:51"
},
[snip]