利用JS AJAX向datatables中的表格体填充数据

最新推荐文章于 2023-09-11 12:45:17 发布

xiangzhihaocsdn

最新推荐文章于 2023-09-11 12:45:17 发布

阅读量4.3k

点赞数

分类专栏：前端文章标签： jquery 前端 ajax html 数据

本文链接：https://blog.csdn.net/xiangzhihaoCSDN/article/details/73824529

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html端代码

<!DOCTYPE html>
<html lang="en">
<head>


<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">


<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>


<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格式返回