如何利用【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文件代码如下：
1 <?php 2 header("content-type:text/html;charset=utf-8"); 3 class mysqlHelp 4 { 5 public $host; 6 public $user; 7 public $password; 8 public $databaseName; 9 public $conn; 10 public $charset='UTF8'; 11 //构造函数
12 public function __construct ($arrTemp) 13 { 14 $host=$this->host=$arrTemp['host']; 15 $user=$this->user=$arrTemp['user']; 16 $password=$this->password=$arrTemp['password']; 17 $databaseName=$this->databaseName=$arrTemp['databaseName']; 18 $this->conn=mysqli_connect($host,$user,$password,$databaseName) or die(mysqli_error($this->conn)); 19 mysqli_query($this->conn, "set names " . $this->charset); 20 } 21 //查询
22 public function queryData($sql) 23 { 24 $res=mysqli_query($this->conn,$sql)or die(mysqli_error($this->conn)); 25 return $res; 26 } 27 //处理查询得到的数据
28 public function getResult($sql){ 29 $resource=mysqli_query($this->conn,$sql) or die(mysqli_error($this->conn));//查询sql语句
30 $res=array(); 31 while(($row=mysqli_fetch_assoc($resource))!=false){ 32 $res[]=$row; 33 } 34 return $res;//将查询到的所有数据返回到一个二维数组中；
35 } 36 } 37 $arr=array( 38 'host'=>'127.0.0.1', 39 'user'=>'root', 40 'password'=>'', //注意这里我的数据库是没有设置密码，要改成自己数据库的密码
41 'databaseName'=>'zt_sign'
42 ); 43 ?>
6.使用mysql.class.php文件中编写的代码，放到data.php中，作为DataTable的请求数据文件(类似于以前我们用的.json文件)
1 <?php 2 require 'mysql.class.php'; 3 $link = new mysqlHelp($arr); 4 $sql="select id,name,time,beginTime,endTime,thisTotal from signtime"; //查询数据库表中数据
5 $array=$link->getResult($sql); //对查询的数据进行处理
6 $json = json_encode($array); //将得到的数据转换成json格式
7 echo ('{"data":'.$json.'}'); //转换的json要以这种格式输出，才能被前台读取，不能直接输出,否则将报错，数据不能再表格中显示
8 //echo $json; 这种输入方法是不正确的
9 ?>
7.上面后台(MySQL和PHP)代码已经写好,下面在前台使用DataTable，对DataTable进行配置，将代码放入到index.php中。
index.php中代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <title></title>
7 <link rel="stylesheet" href="bootstrap.min.css">
8 <link rel="stylesheet" href="jquery.dataTables.min.css">
9 <style>
10 #example tr>td{ 11 text-align: center; 12 } 13 .dataTables_scrollHead thead th { 14 text-align: center !important; 15 } 16 td:first-child{ 17 color: #1abc9c; 18 } 19 </style>
20 </head>
21 <body>
22 <div class="">
23 <table id="example" class="display" cellspacing="0" width="99%">
24 <thead>
25 <tr style="height: 45px;">
26 <th>序号</th>
27 <th>姓名</th>
28 <th>日期</th>
29 <th>开始时间</th>
30 <th>结束时间</th>
31 <th>计时总计</th>
32 </tr>
33 </thead>
34 </table>
35 </div>
36 <script type="text/javascript" src="jquery.min.js"></script>
37 <script type="text/javascript"src="jquery.dataTables.min.js"></script>
38 <script>
39 $(document).ready(function() { 40 $('#example').DataTable({ 41 "ajax":'data.php', 42 /*这里添加了第43--50行,不加会报错，会出现DataTables warning*/
43 "columns": [ 44 {"data": "id", "title": "序号", "defaultContent": ""}, 45 {"data": "name", "title": "姓名", "defaultContent": ""}, 46 {"data": "time", "title": "日期", "defaultContent": ""}, 47 {"data": "beginTime", "title": "开始时间", "defaultContent": ""}, 48 {"data": "endTime", "title": "结束时间", "defaultContent": ""}, 49 {"data": "thisTotal", "title": "计时总计", "defaultContent": ""} 50 ], 51 'bSort': false, 52 "bInfo" : false, 53 "sScrollX" : 500, 54 "bAutoWidth" : true, 55 "iDisplayLength" : 8, 56 "oLanguage": { //国际化配置
57 "sProcessing" : "正在获取数据，请稍后...", 58 "sLengthMenu" : "显示 _MENU_ 条", 59 "sZeroRecords" : "没有您要搜索的内容", 60 "sInfo" : "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条", 61 "sInfoEmpty" : "记录数为0", 62 "sInfoFiltered" : "(全部记录数 _MAX_ 条)", 63 "sInfoPostFix" : "", 64 "sSearch" : "", 65 "sUrl" : "", 66 "oPaginate": { 67 "sFirst" : "第一页", 68 "sPrevious" : "上一页", 69 "sNext" : "下一页", 70 "sLast" : "最后一页"
71 } 72 }, 73 "fnInitComplete":function(oSettings, json) { 74 $("#example_filter").addClass('col-lg-2 form-group'); 75 $("#example_filter input").addClass('col-lg-2 form-control'); 76 } 77 }); 78 $('#example_length').remove(); 79 }); 80 </script>
81 </body>
82 </html>
说明：这个示例中只是用了DataTable的一些功能，很多还没有用到，本示例只是说明在真正与后台进行交互过程的注意事项。
8.附加一些DataTable的详细配置：
1 var docrTable = $('#docrevisontable').dataTable({ 2 "bProcessing" : true, //DataTables载入数据时，是否显示‘进度’提示
3 "bServerSide" : true, //是否启动服务器端数据导入
4 "bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
5 "bJQueryUI" : true, //是否使用 jQury的UI theme
6 "sScrollY" : 450, //DataTables的高
7 "sScrollX" : 820, //DataTables的宽
8 "aLengthMenu" : [20, 40, 60], //更改显示记录数选项
9 "iDisplayLength" : 40, //默认显示的记录数
10 "bAutoWidth" : false, //是否自适应宽度
11 //"bScrollInfinite" : false, //是否启动初始化滚动条
12 "bScrollCollapse" : true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
13 "bPaginate" : true, //是否显示（应用）分页器
14 "bInfo" : true, //是否显示页脚信息，DataTables插件左下角显示记录数
15 "sPaginationType" : "full_numbers", //详细分页组，可以支持直接跳转到某页
16 "bSort" : true, //是否启动各个字段的排序功能
17 "aaSorting" : [[1, "asc"]], //默认的排序方式，第2列，升序排列
18 "bFilter" : true, //是否启动过滤、搜索功能
19 "aoColumns" : [{ 20 "mDataProp" : "USERID", 21 "sDefaultContent" : "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
22 "bVisible" : false //此列不显示
23 }, { 24 "mDataProp" : "USERNAME", 25 "sTitle" : "用户名", 26 "sDefaultContent" : "", 27 "sClass" : "center"
28 }, { 29 "mDataProp" : "EMAIL", 30 "sTitle" : "电子邮箱", 31 "sDefaultContent" : "", 32 "sClass" : "center"
33 }, { 34 "mDataProp" : "MOBILE", 35 "sTitle" : "手机", 36 "sDefaultContent" : "", 37 "sClass" : "center"
38 }, { 39 "mDataProp" : "PHONE", 40 "sTitle" : "座机", 41 "sDefaultContent" : "", 42 "sClass" : "center"
43 }, { 44 "mDataProp" : "NAME", 45 "sTitle" : "姓名", 46 "sDefaultContent" : "", 47 "sClass" : "center"
48 }, { 49 "mDataProp" : "ISADMIN", 50 "sTitle" : "用户权限", 51 "sDefaultContent" : "", 52 "sClass" : "center"
53 }], 54 "oLanguage": { //国际化配置
55 "sProcessing" : "正在获取数据，请稍后...", 56 "sLengthMenu" : "显示 _MENU_ 条", 57 "sZeroRecords" : "没有您要搜索的内容", 58 "sInfo" : "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条", 59 "sInfoEmpty" : "记录数为0", 60 "sInfoFiltered" : "(全部记录数 _MAX_ 条)", 61 "sInfoPostFix" : "", 62 "sSearch" : "搜索", 63 "sUrl" : "", 64 "oPaginate": { 65 "sFirst" : "第一页", 66 "sPrevious" : "上一页", 67 "sNext" : "下一页", 68 "sLast" : "最后一页"
69 } 70 }, 71
72 "fnRowCallback" : function(nRow, aData, iDisplayIndex) { 73 /* 用来改写用户权限的 */
74 if (aData.ISADMIN == '1') 75 $('td:eq(5)', nRow).html('管理员'); 76 if (aData.ISADMIN == '2') 77 $('td:eq(5)', nRow).html('资料下载'); 78 if (aData.ISADMIN == '3') 79 $('td:eq(5)', nRow).html('一般用户'); 80
81 return nRow; 82 }, 83
84 "sAjaxSource" : "../use/userList.do?now=" + new Date().getTime(), 85 //服务器端，数据回调处理
86 "fnServerData" : function(sSource, aDataSet, fnCallback) { 87 $.ajax({ 88 "dataType" : 'json', 89 "type" : "POST", 90 "url" : sSource, 91 "data" : aDataSet, 92 "success" : fnCallback 93 }); 94 } 95 }); 96
97 $("#docrevisontable tbody").click(function(event) { //当点击表格内某一条记录的时候，会将此记录的cId和cName写入到隐藏域中
98 $(docrTable.fnSettings().aoData).each(function() { 99 $(this.nTr).removeClass('row_selected'); 100 }); 101 $(event.target.parentNode).addClass('row_selected'); 102 var aData = docrTable.fnGetData(event.target.parentNode); 103
104 $("#userId").val(aData.USERID); 105 $("#userN").val(aData.USERNAME); 106 }); 107
108 $('#docrevisontable_filter').html('<span>用户管理列表'); 109 $('#docrevisontable_filter').append(' <input type="button" class="addBtn" id="addBut" value="创建"/>'); 110 $('#docrevisontable_filter').append(' <input type="button" class="addBtn" id="addBut" value="修改"/>'); 111 $('#docrevisontable_filter').append(' <input type="button" class="addBtn" id="addBut" value="删除"/>'); 112 $('#docrevisontable_filter').append('</span>'); 113 }