【发布时间】：2019-07-03 16:57:13
【问题描述】：
我在使用 datatables.net 时遇到了我的 DataTables 的问题，我现在遇到的问题是“显示 # 到 # 个条目”不起作用，并且不计算它在表格和分页中显示的数据不工作，搜索栏不工作，“显示 10/100 条目”不工作。
PS：我给他们加上引号是因为我不知道你怎么称呼他们。
这是我的 html 和 ajax 代码
<div class="card card-dark">
<h6 class="card-header">User Status Details</h6>
<div class="card-body">
<span id="message"></span>
<div class="table-responsive">
<table class="table table-striped" id="table-1">
</div>
</table>
<script>
$(document).ready(function(){
load_user_data();
function load_user_data()
{
var action = 'fetch';
$.ajax({
url:'action',
method:'POST',
data:{action:action},
success:function(data)
{
$('#table-1').html(data);
}
});
}
$(document).on('click', '.action', function(){
var id = $(this).data('id');
var user_status = $(this).data('user_status');
var action = 'change_status';
$('#message').html('');
if(confirm("Change User Status"))
{
$.ajax({
url:'action',
method:'POST',
data:{id:id, user_status:user_status, action:action},
success:function(data)
{
if(data != '')
{
load_user_data();
$('#message').html(data);
}
}
});
}
else
{
return false;
}
});
});
</script>
</div>
</div>
我的操作代码
if(isset($_POST['action']))
{
if($_POST["action"] == 'fetch')
{
$output = '';
$query = "SELECT * FROM users WHERE user_type = 'user' ORDER BY username ASC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$output .= '
<table class="table table-striped" id="table-1">
<tr>
<td>ID #</td>
<td>Username</td>
<td>Status</td>
<td>Action</td>
</tr>
';
foreach($result as $row)
{
$status = '';
if($row["user_status"] == 'Active')
{
$status = '<span class="badge badge-primary">Active</span>';
}
else
{
$status = '<span class="badge badge-primary">Inactive</span>';
}
$output .= '
<tr>
<td>'.$row['id'].'</td>
<td>'.$row['username'].'</td>
<td>'.$status.'</td>
<td><button type="button" name="action" class="btn btn-info btn-xs action" data-id="'.$row["id"].'" data-user_status="'.$row["user_status"].'">Action</button></td>
</tr>
';
}
$output .= '</table>';
echo $output;
}
if($_POST["action"] == 'change_status')
{
$status = '';
if($_POST['user_status'] == 'Active')
{
$status = 'Inactive';
}
else
{
$status = 'Active';
}
$query = '
UPDATE users SET user_status = :user_status WHERE id = :id
';
$statement = $connect->prepare($query);
$statement->execute(
array(
':user_status' => $status,
':id' => $_POST['id']
)
);
$result = $statement->fetchAll();
if(isset($result))
{
echo '<div class="alert alert-info">User status set to <strong>'.$status.'</strong><div>';
}
}
}
?>
我无法弄清楚我的代码中缺少什么，但 ajax 代码工作正常，并且数据显示在我的 DataTable 中
【问题讨论】：
-
JS中DataTable在哪里初始化？如果您也在使用它，请在 JS
$('#table-1').DataTable();中添加。看看怎么实现here -
@AksenP 我正在使用这个模板github.com/stisla/stisla 这已经包含了数据表
-
您遇到所有这些问题是因为您没有按原样使用 DT。我看不到你在哪里初始化它。它应该在
$('#table-1').html(data);之后。提供控制台错误。 -
@AksenP 我尝试在
$('#table-1').html(data);下添加$('#table-1').DataTable();，但没有任何反应，但我也没有收到任何控制台错误 -
查看标签。
<div class="table-responsive"> <table class="table table-striped" id="table-1"> </div> </table>你看到这个芝士汉堡了吗？我建议你使用<div id="table-1">而不是<table>。