如何利用【DataTable】结合自己本地数据库，使用表格
我们都知道DataTable的使用与配置，平时我们都是用一个json文件来代替后台，但是实际上我们在与后台交互的时候，后台先取到数据库里面的信息，然后经过后台代码的处理，返回json格式或者其他数据格式，然后前台得到后再在页面中显示出来。我们一般用json文件代替后台数据会然我们忽略一些细节。
下面我们就来讲解一下如何根据自己本地数据库和后台语言(mysql+php)，将数据库中的信息显示在前端页面的表格里。
这里需要用到：请将这些库提前准备好放到文件中
jquery.dataTables.min.css
jquery.dataTables.min.js
jquery.min.js
bootstrap.min.css
另外用到：MySQL+PHP (没有基础也没事，后面附有)
1.创建数据库，SQL语句：
create database zt_sign CHARSET=utf8;
use zt_sign;
2.创建表格，SQL语句：
CREATE TABLE IF NOT EXISTS `signtime` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(32) NOT NULL,
`time` date NOT NULL,
`beginTime` char(255) NOT NULL,
`endTime` char(255) NOT NULL,
`thisTotal` char(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=402 ;
3.来看一下创建好的数据库表结构为：
4.插入数据：
这里我们准备了15条自己的数据，id是按顺序插入的
SQL语句：
INSERT INTO `signtime` (`id`, `name`, `time`, `beginTime`, `endTime`, `thisTotal`) VALUES
(1, '小包', '2016-11-21', '2016-11-21 18:33:48', '2016-11-21 21:38:04', '3:4:17'),
(2, '小莹', '2016-11-21', '2016-11-21 18:36:46', '2016-11-21 21:38:46', '3:2:0'),
(3, '小朱', '2016-11-21', '2016-11-21 10:29:07', '2016-11-21 12:03:37', '1:34:30'),
(4, '小孟', '2016-11-21', '2016-11-21 10:30:54', '2016-11-21 12:04:39', '1:33:45'),
(5, '小强', '2016-11-21', '2016-11-21 12:39:28', '2016-11-21 15:42:29', '3:3:1'),
(6, '小康', '2016-11-21', '2016-11-21 14:28:25', '2016-11-21 18:49:01', '4:20:36'),
(7, '小丽', '2016-11-21', '2016-11-21 17:32:51', '2016-11-21 21:39:24', '4:6:33'),
(8, '小苗', '2016-11-21', '2016-11-21 18:57:41', '2016-11-21 19:03:16', '0:5:35'),
(9, '小伟', '2016-11-21', '2016-11-21 18:19:25', '2016-11-21 19:09:24', '0:49:59'),
(10, '小明', '2016-11-21', '2016-11-21 13:57:59', '2016-11-21 19:17:55', '5:19:56'),
(11, '小亚', '2016-11-21', '2016-11-21 15:22:07', '2016-11-21 19:43:09', '4:21:2'),
(12, '小聂', '2016-11-21', '2016-11-21 17:51:58', '2016-11-21 20:09:15', '2:17:17'),
(13, '小鑫', '2016-11-21', '2016-11-21 13:55:03', '2016-11-21 20:12:03', '6:17:0'),
(14, '小贵', '2016-11-21', '2016-11-21 19:20:35', '2016-11-21 21:50:21', '2:29:46'),
(15, '小伟', '2016-11-21', '2016-11-21 19:03:23', '2016-11-21 21:54:56', '2:51:33'),
(16, '小邢', '2016-11-21', '2016-11-21 19:43:14', '2016-11-21 21:56:13', '2:12:59'),
(17, '小静', '2016-11-28', '2016-11-28 16:31:36', '2016-11-28 17:06:32', '0:34:56'),
(18, '小鑫', '2016-11-28', '2016-11-28 17:06:42', '2016-11-28 17:09:56', '0:3:14'),
(19, '小康', '2016-11-28', '2016-11-28 15:02:24', '2016-11-28 17:43:42', '2:41:18'),
(20, '小冬', '2016-11-30', '2016-11-30 14:00:36', '2016-11-30 15:20:38', '1:20:2');
5.连接数据库，编写得到表signtime里的数据的代码，编写对数据进行处理的代码，将这些前期准备的操作代码放到mysql.class.php文件中。
mysql.class.php文件代码如下：
<?php
header("content-type:text/html;charset=utf-8");
class mysqlHelp
{
public $host;
public $user;
public $password;
public $databaseName;
public $conn;
public $charset='UTF8';
//构造函数
public function __construct ($arrTemp)
{
$host=$this->host=$arrTemp['host'];
$user=$this->user=$arrTemp['user'];
$password=$this->password=$arrTemp['password'];
$databaseName=$this->databaseName=$arrTemp['databaseName'];
$this->conn=mysqli_connect($host,$user,$password,$databaseName) or die(mysqli_error($this->conn));
mysqli_query($this->conn, "set names " . $this->charset);
}
//查询
public function queryData($sql)
{
$res=mysqli_query($this->conn,$sql)or die(mysqli_error($this->conn));
return $res;
}
//处理查询得到的数据
public function getResult($sql){
$resource=mysqli_query($this->conn,$sql) or die(mysqli_error($this->conn));//查询sql语句
$res=array();
while(($row=mysqli_fetch_assoc($resource))!=false){
$res[]=$row;
}
return $res;//将查询到的所有数据返回到一个二维数组中；
}
}
$arr=array(
'host'=>'127.0.0.1',
'user'=>'root',
'password'=>'', //注意这里我的数据库是没有设置密码，要改成自己数据库的密码
'databaseName'=>'zt_sign'
);
?>
6.使用mysql.class.php文件中编写的代码，放到data.php中，作为DataTable的请求数据文件(类似于以前我们用的.json文件)
<?php
require 'mysql.class.php';
$link = new mysqlHelp($arr);
$sql="select id,name,time,beginTime,endTime,thisTotal from signtime"; //查询数据库表中数据
$array=$link->getResult($sql); //对查询的数据进行处理
$json = json_encode($array); //将得到的数据转换成json格式
echo ('{"data":'.$json.'}'); //转换的json要以这种格式输出，才能被前台读取，不能直接输出,否则将报错，数据不能再表格中显示
//echo $json; 这种输入方法是不正确的
?>
7.上面后台(MySQL和PHP)代码已经写好,下面在前台使用DataTable，对DataTable进行配置，将代码放入到index.php中。
index.php中代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="jquery.dataTables.min.css">
<style>
#example tr>td{
text-align: center;
}
.dataTables_scrollHead thead th {
text-align: center !important;
}
td:first-child{
color: #1abc9c;
}
</style>
</head>
<body>
<div class="">
<table id="example" class="display" cellspacing="0" width="99%">
<thead>
<tr style="height: 45px;">
<th>序号</th>
<th>姓名</th>
<th>日期</th>
<th>开始时间</th>
<th>结束时间</th>
<th>计时总计</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript"src="jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable({
"ajax":'data.php',
/*这里添加了第43--50行,不加会报错，会出现DataTables warning*/
"columns": [
{"data": "id", "title": "序号", "defaultContent": ""},
{"data": "name", "title": "姓名", "defaultContent": ""},
{"data": "time", "title": "日期", "defaultContent": ""},
{"data": "beginTime", "title": "开始时间", "defaultContent": ""},
{"data": "endTime", "title": "结束时间", "defaultContent": ""},
{"data": "thisTotal", "title": "计时总计", "defaultContent": ""}
],
'bSort': false,
"bInfo" : false,
"sScrollX" : 500,
"bAutoWidth" : true,
"iDisplayLength" : 8,
"oLanguage": { //国际化配置
"sProcessing" : "正在获取数据，请稍后...",
"sLengthMenu" : "显示 _MENU_ 条",
"sZeroRecords" : "没有您要搜索的内容",
"sInfo" : "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条",
"sInfoEmpty" : "记录数为0",
"sInfoFiltered" : "(全部记录数 _MAX_ 条)",
"sInfoPostFix" : "",
"sSearch" : "",
"sUrl" : "",
"oPaginate": {
"sFirst" : "第一页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "最后一页"
}
},
"fnInitComplete":function(oSettings, json) {
$("#example_filter").addClass('col-lg-2 form-group');
$("#example_filter input").addClass('col-lg-2 form-control');
}
});
$('#example_length').remove();
});
</script>
</body>
</html>
说明：这个示例中只是用了DataTable的一些功能，很多还没有用到，本示例只是说明在真正与后台进行交互过程的注意事项。
8.附加一些DataTable的详细配置：
var docrTable = $('#docrevisontable').dataTable({
"bProcessing" : true, //DataTables载入数据时，是否显示‘进度’提示
"bServerSide" : true, //是否启动服务器端数据导入
"bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
"bJQueryUI" : true, //是否使用 jQury的UI theme
"sScrollY" : 450, //DataTables的高
"sScrollX" : 820, //DataTables的宽
"aLengthMenu" : [20, 40, 60], //更改显示记录数选项
"iDisplayLength" : 40, //默认显示的记录数
"bAutoWidth" : false, //是否自适应宽度
//"bScrollInfinite" : false, //是否启动初始化滚动条
"bScrollCollapse" : true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
"bPaginate" : true, //是否显示（应用）分页器
"bInfo" : true, //是否显示页脚信息，DataTables插件左下角显示记录数
"sPaginationType" : "full_numbers", //详细分页组，可以支持直接跳转到某页
"bSort" : true, //是否启动各个字段的排序功能
"aaSorting" : [[1, "asc"]], //默认的排序方式，第2列，升序排列
"bFilter" : true, //是否启动过滤、搜索功能
"aoColumns" : [{
"mDataProp" : "USERID",
"sDefaultContent" : "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
"bVisible" : false //此列不显示
}, {
"mDataProp" : "USERNAME",
"sTitle" : "用户名",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "EMAIL",
"sTitle" : "电子邮箱",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "MOBILE",
"sTitle" : "手机",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "PHONE",
"sTitle" : "座机",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "NAME",
"sTitle" : "姓名",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "ISADMIN",
"sTitle" : "用户权限",
"sDefaultContent" : "",
"sClass" : "center"
}],
"oLanguage": { //国际化配置
"sProcessing" : "正在获取数据，请稍后...",
"sLengthMenu" : "显示 _MENU_ 条",
"sZeroRecords" : "没有您要搜索的内容",
"sInfo" : "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条",
"sInfoEmpty" : "记录数为0",
"sInfoFiltered" : "(全部记录数 _MAX_ 条)",
"sInfoPostFix" : "",
"sSearch" : "搜索",
"sUrl" : "",
"oPaginate": {
"sFirst" : "第一页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "最后一页"
}
},
"fnRowCallback" : function(nRow, aData, iDisplayIndex) {
/* 用来改写用户权限的 */
if (aData.ISADMIN == '1')
$('td:eq(5)', nRow).html('管理员');
if (aData.ISADMIN == '2')
$('td:eq(5)', nRow).html('资料下载');
if (aData.ISADMIN == '3')
$('td:eq(5)', nRow).html('一般用户');
return nRow;
},
"sAjaxSource" : "../use/userList.do?now=" + new Date().getTime(),
//服务器端，数据回调处理
"fnServerData" : function(sSource, aDataSet, fnCallback) {
$.ajax({
"dataType" : 'json',
"type" : "POST",
"url" : sSource,
"data" : aDataSet,
"success" : fnCallback
});
}
});
$("#docrevisontable tbody").click(function(event) { //当点击表格内某一条记录的时候，会将此记录的cId和cName写入到隐藏域中
$(docrTable.fnSettings().aoData).each(function() {
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
var aData = docrTable.fnGetData(event.target.parentNode);
$("#userId").val(aData.USERID);
$("#userN").val(aData.USERNAME);
});
$('#docrevisontable_filter').html('<span>用户管理列表');
$('#docrevisontable_filter').append(' <input type="button" class="addBtn" id="addBut" value="创建"/>');
$('#docrevisontable_filter').append(' <input type="button" class="addBtn" id="addBut" value="修改"/>');
$('#docrevisontable_filter').append(' <input type="button" class="addBtn" id="addBut" value="删除"/>');
$('#docrevisontable_filter').append('</span>');
}