DataTable Editor
简介：
官方网址：https://editor.datatables.net/
功能介绍：可以支持table中的数据来源于ajax，支持数据分页，支持对表格中的数据进行修改，并保存在数据库中，支持bootstrap，功能很强大。
效果图：
效果图简介：
1) 左上角的new按钮，点击，弹出一个窗口，可以创建一条新的记录
2) 右上角的search按钮，可以对表格中的所有列进行搜索，结果实时反正在当前的table中
3) Table中每个列名字右边有向上和向下的两个箭头，点击就可以排序
4) 右下角的就是自带提供的分页功能
安装步骤
1 把插件引入Thinkphp中
把整个代码放在thinkphp框架下的Vendor目录下
2 创建控制器
<?php
// 本类由系统自动生成，仅供测试用途
namespace Home\Controller;
use Think\Controller;
use Think\Model;
// include("../Edit/DataTables.php" );
vendor('Edit.DataTables');
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Upload,
DataTables\Editor\Validate,
DataTables\Database;
class BootstrapController extends BaseController
{
public $editordb;
public function __construct()
{
parent::__construct();
$sql_details = array(
"type" => "Mysql",// Database type: "Mysql","Postgres", "Sqlite" or "Sqlserver"
"user" => "root", // Database user name
"pass" => "", // Database password
"host" => "localhost",// Database host
"port" => "", // Database connection port (can be left empty fordefault)
"db" => "WTJL", // Database name
"dsn" => "charset=utf8"
)// PHP DSN extra information. Set as`charset=utf8` if you are using MySQL
// 'pdo' => new Model()
;
$this->editordb = new Database($sql_details);
}
public function index()
{
$this->display();
}
public function datatable()
{
$this->display();
}
public function GetTableData()
{
$test = D('userinfo');
$rst = $test->select();
$arr = array(
"data" => $rst
);
$this->ajaxReturn($arr, "JSON");
}
public function editTableData()
{
$this->display();
}
Public function HandleEditTableData()
{
$qing = Editor::inst($this->editordb, 'wt_userinfo', 'UI_ID');
$qing->fields(Field::inst('UI_ID'), Field::inst('UI_DEPARTMENT'), Field::inst('UI_ROOM'), Field::inst('UI_NAME'), Field::inst('UI_SHORTNAME'), Field::inst('UI_TELE_NO'));
$qing->process($_POST);
$qing->json();
}
}
?>
3 创建视图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Editor Table Data</title>
<link href="{$smarty.const.__CSS__}/jquery.dataTables.min.css"rel="stylesheet">
<link href="{$smarty.const.__CSS__}/buttons.dataTables.min.css"rel="stylesheet">
<link href="{$smarty.const.__CSS__}/select.dataTables.min.css"rel="stylesheet">
<link href="{$smarty.const.__CSS__}/editor.dataTables.min.css"rel="stylesheet">
<script type="text/javascript"language="JavaScript" src="{$smarty.const.__JS__}/jquery-1.12.3.min.js"></script>
<script type="text/javascript"language="JavaScript" src="{$smarty.const.__JS__}/jquery.dataTables.min.js"></script>
<script type="text/javascript"language="JavaScript" src="{$smarty.const.__JS__}/dataTables.buttons.min.js"></script>
<script type="text/javascript"language="JavaScript" src="{$smarty.const.__JS__}/dataTables.select.min.js"></script>
<script type="text/javascript"language="JavaScript" src="{$smarty.const.__JS__}/dataTables.keyTable.min.js"></script>
<script type="text/javascript"language="JavaScript" src="{$smarty.const.__JS__}/dataTables.editor.min.js"></script>
<script type="text/javascript">
var editor; // use a global for the submit and returndata rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor({
ajax: "{$smarty.const.__CONTROLLER__}/HandleEditTableData",
type: 'post',
table: "#example",
idSrc: 'UI_ID',
fields: [ {
label: "First name:",
name: "UI_ID"
}, {
label: "Last name:",
name: "UI_DEPARTMENT"
}, {
label: "Position:",
name: "UI_ROOM"
}, {
label: "Office:",
name: "UI_NAME"
}, {
label: "Extension:",
name: "UI_SHORTNAME"
}, {
label: "Salary:",
name: "UI_TELE_NO",
type:"readonly"
}
],
formOptions: {
inline: {
onBlur: 'submit'
}
}
} );
var table=$('#example').DataTable({
dom: "Bfrtip",
ajax: "{$smarty.const.__CONTROLLER__}/GetTableData",
columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ "data": "UI_ID"},
{ "data": "UI_DEPARTMENT"},
{ "data": "UI_ROOM"},
{ "data": "UI_NAME"},
{ "data": "UI_SHORTNAME"},
{ "data": "UI_TELE_NO"}
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
$('#example').on('dblclick','tbody td:not(:first-child)', function (e){
editor.inline( this );
} );
} );
</script>
</head>
<body>
<table id="example"class="display" cellspacing="0" style="text-align:center;">
<thead>
<tr>
<th></th>
<th>UI_ID</th>
<th>UI_DEPARTMENT</th>
<th>UI_ROOM</th>
<th>UI_NAME</th>
<th>UI_SHORTNAME</th>
<th>UI_TELE_NO</th>
</tr>
</thead>
</table>
</body>
</html>
4 总结
1) GetTableData函数是通过ajax方式，将数据从数据库发送到前端
2) HandleEditTableData函数将前端修改的数据写入数据库
3) 在中"dsn"=> "charset=utf8"，这里是来设置数据库编码的，防止中文乱码
4) new $.fn.dataTable.Editor的js中有一个idSrc:'UI_ID'，表示我的row的唯一标示是UI_ID
5) 在HandleEditTableData函数中，$qing = Editor::inst($this->editordb, 'wt_userinfo', 'UI_ID'); 'wt_userinfo'是我数据库表的名字，'UI_ID'是我表的主键，如果主键不指定的话，默认为'id'
6) 如果对前端table中某个数据不让它可修改，那么在设置列fields的时候应该加上type: "readonly"，就像UI_TELE_NO列的设置一样。