【发布时间】：2021-06-13 17:35:29
【问题描述】：
我正在使用 Jquery 数据表来显示我的数据，这些数据来自一个 ajax 调用和一个 json 文件。 我正在使用两个表，第一个（#list1）显示来自 sql 的数据，第二个（#list2）在我单击第一个表中的一个行（单击事件）时被填充。我正在为重新加载数据而苦恼，我使用 clear() 和 draw() 重新加载表格，但是在使用这个之后，第二个表格 (#list2) 停止显示信息，只有你去点击它才会出现数据。我想这是我重新加载表格的方式，但没有其他方法对我有用。
这是我的 jquery 代码：
$(document).ready(
function()
{
$('#list1').DataTable(
{
dom: 'lfrtipB', //elementos del DOM y orden
buttons: ['csv', 'excel', 'pdf', 'print']
});
$('#list2').DataTable(
{
responsive: true,
searching: false,
});
$("#list1 tr").click(
function ()
{
var cod = ($(this).find("td:first").text());
$.ajax({
url: 'https://www.urlblabla.php',
data: {
action: 'usuario',
idfiltro: cod
},
type :'post',
success: function(sql)
{
var t= $('#list2').DataTable().clear().draw();
$.each(JSON.parse(sql), function(idx, opt)
{
t.row.add([ opt.1, opt.2,opt.3,opt.4]).draw(); //this was my mistake I add the draw() method
});
}//endsuccess
}); //endajax
}//end function
);//end click
}
);//fin document ready
我尝试使用 reload() 函数，但浏览器给了我一个函数未找到错误
这是我的html代码（很简单）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/jquery-ui-1.10.2.custom.min.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"/>
<link href="libreriasWS/dataTables.bootstrap5.min.css"rel="stylesheet" type="text/css"/>
<link href="libreriasWS/jquery.dataTables.min.css"rel="stylesheet" type="text/css"/>
<link href="libreriasWS/datatable_style.css"rel="stylesheet" type="text/css"/>
<link href="libreriasWS/buttons.dataTables.min.css"rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript" src="libreriasWS/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="libreriasWS/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="libreriasWS/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
</head>
<body>
<center>
<div id="content" class="container">
<div class="datatable-inner table-responsive ps ps--active-x">
<h4>Users</h4>
<table id="list1" class="table datatable-table hover">
<thead class="datatable-header">
<tr>
<th>ID</th>
<th>name</th>
<th>Line</th>
</tr>
</thead>
<tbody>
<?php
$cli = $soapClient->getData("","array_data","");
$result_array = json_decode($cli);
for ($i=0; $i < count($result_array); $i++)
{
print '<tr>';
print '<td>'.$data_array[$i]->{'Id'} .'</td>';
print '<td>'.$data_array[$i]->{'name'} .'</td>';
print '<td>'.$data_array[$i]->{'line'} .'</td>';
print '</tr>';
}//finfor
?>
</tbody>
</table>
</div>
<div class="datatable-inner table-responsive ps ps--active-x">
<h6>Users</h6>
<table id="list2" class="table datatable-table hover">
<thead class="datatable-header">
<tr>
<th>ID</th>
<th>Descripcion</th>
<th>MAC</th>
<th>Cliente</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<br/>
</div> <!--Fin Tab Content-->
</div> <!--Fin Tab Content contaniner-->
</center>
</body>
【问题讨论】：
标签： html json ajax bootstrap-4 datatable