1
私はJavascriptで新しく、Ajaxについて考えていませんでしたが、DataTablesとButtonsとEditorの2つのコンポーネントを使用する必要があります。私はちょうどこのhttps://editor.datatables.net/examples/styling/bootstrapで与えられた以下のコードをコピーしますが、その後私は次のものを知らなかった。私はhttps://editor.datatables.net/examples/styling/bootstrapにコードをコピーし、私はこれを、以下の下に持っています。私のデータテーブルが機能していない、何が間違っている、私は自分のデータベースに保存して選択することもできません。私は助けてくれることを願っています。Editor DataTables：Not Working
index.htmlを
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.14/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.2/css/select.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.14/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.14/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.bootstrap.min.js"></script>
<script type="text/javascript" src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
<script type="text/javascript" src="https://editor.datatables.net/extensions/Editor/js/editor.bootstrap.min.js"></script>
<script type="text/javascript" class="init">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor({
ajax: "staff.php",
table: "#example",
fields: [ {
label: "First name:",
name: "first_name"
}, {
label: "Last name:",
name: "last_name"
}, {
label: "Position:",
name: "position"
}, {
label: "Office:",
name: "office"
}, {
label: "Extension:",
name: "extn"
}, {
label: "Start date:",
name: "start_date",
type: 'datetime'
}, {
label: "Salary:",
name: "salary"
}
]
});
var table = $('#example').DataTable({
lengthChange: false,
ajax: "../php/staff.php",
columns: [
{ data: null, render: function (data, type, row) {
// Combine the first and last names into a single table field
return data.first_name+' '+data.last_name;
} },
{ data: "position" },
{ data: "office" },
{ data: "extn" },
{ data: "start_date" },
{ data: "salary", render: $.fn.dataTable.render.number(',', '.', 0, '$') }
],
select: true
});
// Display the buttons
new $.fn.dataTable.Buttons(table, [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]);
table.buttons().container()
.appendTo($('.col-sm-6:eq(0)', table.table().container()));
});
</script>
</head>
<body>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</body>
</html>
staff.php
<?php
/*
* Example PHP implementation used for the index.html example
*/
// DataTables PHP library
include("DataTables.php");
// Alias Editor classes so they are easy to use
//I'm a new with Javascript and didn't have any idea about Ajax but I need to use DataTables and its two components, Buttons and Editor. I just copy past the following codes given in this https://editor.datatables.net/examples/styling/bootstrap but after that I didn't know what's next. The DataTables not working, I hope I've got help.
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate;
// Build our Editor instance and process the data coming from _POST
Editor::inst($db, 'datatables_demo')
->fields(
Field::inst('first_name')->validator('Validate::notEmpty'),
Field::inst('last_name')->validator('Validate::notEmpty'),
Field::inst('position'),
Field::inst('email'),
Field::inst('office'),
Field::inst('extn'),
Field::inst('age')
->validator('Validate::numeric')
->setFormatter('Format::ifEmpty', null),
Field::inst('salary')
->validator('Validate::numeric')
->setFormatter('Format::ifEmpty', null),
Field::inst('start_date')
->validator('Validate::dateFormat', array(
"format" => Format::DATE_ISO_8601,
"message" => "Please enter a date in the format yyyy-mm-dd"
))
->getFormatter('Format::date_sql_to_format', Format::DATE_ISO_8601)
->setFormatter('Format::date_format_to_sql', Format::DATE_ISO_8601)
)
->process($_POST)
->json();
staff.js
{
"data": [
{
"DT_RowId": "row_1",
"first_name": "Tiger",
"last_name": "Nixon",
"position": "System Architect",
"email": "[email protected]",
"office": "Edinburgh",
"extn": "5421",
"age": "61",
"salary": "320800",
"start_date": "2011-04-25"
},
{
"DT_RowId": "row_57",
"first_name": "Donna",
"last_name": "Snider",
"position": "Customer Support",
"email": "[email protected]",
"office": "New York",
"extn": "4226",
"age": "27",
"salary": "112000",
"start_date": "2011-01-25"
}
],
"options": [],
"files": []
}