如何利用【DataTable】结合自己本地数据库，使用表格
如何利用【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 }
