前端html页面中的dataTable表格获取数据库中的数据,提供html页面所需的代码
时间: 2024-02-17 09:04:11 浏览: 127
首先,需要使用后端语言(如PHP、Python等)从数据库中获取数据,然后将数据以JSON格式返回给前端。在前端页面中,使用jQuery或其他JavaScript库,通过AJAX请求获取后端返回的数据,然后将数据填充到dataTable表格中。
以下是一个简单的示例代码:
HTML代码:
```html
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
```
JavaScript代码:
```javascript
$(document).ready(function() {
$('#example').DataTable({
"ajax": "/get_data.php", // 后端获取数据的API接口
"columns": [
{"data": "id"},
{"data": "name"},
{"data": "email"}
]
});
});
```
后端PHP代码(get_data.php):
```php
<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$conn = new mysqli($servername, $username, $password, $dbname);
// 查询数据
$sql = "SELECT id, name, email FROM MyGuests";
$result = $conn->query($sql);
// 将数据转换为JSON格式
$data = array();
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
echo json_encode(array("data" => $data));
// 关闭数据库连接
$conn->close();
?>
```
注意:以上代码仅供参考,实际使用时需要根据具体情况进行修改。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)