利用JS AJAX向datatables中的表格體填充資料
html端程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<!--第一步：引入Javascript / CSS （CDN）-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table id="table_id_example" class="display">
<thead>
<tr>
<th>users</th>
<th>nickname</th>
<th>phonenumber</th>
</tr>
</thead>
<tbody align="center">
</tbody>
</table>
</body>
<script>
$(document).ready(function(){
$.ajax({
type:'get',
dataType:'json',
url:"./datatables.php",
success:function(data){ //接收結果後用datatables自帶的DataTable函式向表格體填充資料
$('#table_id_example').DataTable({
data: data,
columns: [
{ data: 'id' }, //為每一列表格應該填充的內容指明json的標題,否則datatables找不到這一列要載入的內容
{ data: 'nickname' },
{ data: 'phonenumber' }
]
});
}
})
});
</script>
</html>
php端程式碼
<?php
header("content-type:text/html;charset=utf-8");
// 執行新增並返回結果
require './config.php';//資料庫配置
require './Model.class.php';//Model類檔案
$model = new Model('users');
echo json_encode($model->select());//用json_encode函式將查詢結果以json格式返回