如何利用【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 }