【发布时间】：2017-09-13 16:35:11
【问题描述】：
我是 Javascript 新手，对 Ajax 没有任何概念，但我需要使用 DataTables 及其两个组件，即按钮和编辑器。我只是复制了https://editor.datatables.net/examples/styling/bootstrap 中给出的以下代码，但之后我不知道接下来会发生什么。我在https://editor.datatables.net/examples/styling/bootstrap 复制代码，我得到了这个，如下所示。我的 DataTables 不工作，出了什么问题，我无法保存到我的数据库并选择。我希望我能得到帮助。
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": "t.nixon@datatables.net",
"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": "d.snider@datatables.net",
"office": "New York",
"extn": "4226",
"age": "27",
"salary": "112000",
"start_date": "2011-01-25"
}
],
"options": [],
"files": []
}
【问题讨论】：
标签： javascript php jquery twitter-bootstrap datatable