我有一个由php创建的html表,我想对这个表进行排序,但没有成功。如果我在html中创建表,则排序工作。
<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container mb-3 mt-3" id="inicio">
</div>
<script>
$(document).ready(function(){
load_list();
$('.mydatatable').DataTable();
function load_list()
{
var action = "data";
$.ajax({
url: "teste.php",
method:"POST",
data:{action:action},
success:function(data)
{
$('#inicio').html(data);
}
})
}
});
</script>
</body>
</html>php中的表示例:
<?php
if(isset($_POST["action"]))
{
if($_POST["action"]=="data")
{
$output = '
<table class="table table-striped table-bordered mydatatable" style="width: 100%">
<thead>
<tr>
<th>Tittle</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
<tr>
<td>date2</td>
</tr>
</tbody>
</table>
';
echo $output;
}
?>我认为$('.mydatatable').DataTable();在错误的地方,我尝试了我的选项,但是只有当表在html页面中时才能工作。有人能帮我吗?
发布于 2019-09-06 13:45:34
首先,A在ajax中的意思是asynchronous,然后对$('.mydatatable').DataTable();的调用在通过ajax加载真实数据之前发生。您应该将对DataTable的调用移动到success回调:
success:function(data)
{
// note the order - first you load `html`
$('#inicio').html(data);
// after that you have a `.mydatatable` selector available
$('.mydatatable').DataTable();
}https://stackoverflow.com/questions/57823142
复制相似问题