在两个 JQuery 数据表之间切换

Question

我有两个 JQuery 数据表 (datatables.net)，一个带有消息，第二个带有联系人。我想在不刷新页面的情况下加载它们，即如果我单击链接 1 会显示消息，如果单击链接 2 会显示消息表消失并显示联系人。我可以通过将表格放在不同的 div 中并在它们上使用 .show 和 .hide 来获得它。但是，如果我有 20 个不同的表格，我需要一次只显示一个。在客户端加载所有 20 个表并隐藏它们可能会占用大量内存。我有点卡住和溢出）。

我尝试了以下方法：

<a href='#' onclick='test_widget();return false;'

<script type="text/javascript">
function test_widget()
{   $.ajax({
        type:'POST',
        url:'contacts.php', 
        data:$('#test_widget').serialize(), 
        success:function(data)
        {   $('#test_widget').html(data);   
        }, 
    error:function(XMLHttpRequest, textStatus, errorThrown)
        {   $("#test_widget").html(errorThrown + ': ' + this.url);  
        },
    dataType:'html'
    });
}
</script>
<div id='test_widget'></div>

然后是contacts.php：

<table class="table table-bordered table-striped checked-in has-checkbox" id="dtable">
 <thead>
  <tr>
   <th>Last Name</th>
   <th>First Name</th>
   <th>Middle Name</th>
   <th>Email</th>
   <th>Phone</th>
   <th> </th>
  </tr>
</thead>
 <tbody>
  <?
$res=mysql_query('SELECT * FROM people ORDER BY lname LIMIT 1000');
while($row=mysql_fetch_array($res)){

  ?>

  <tr class="gradeA">
  <td><?=$row['lname']?> </td>
  <td><?=$row['fname']?> </td>
  <td><?=$row['patronymic']?> </td>
  <td class="center"><?=$row['email']?> </td>
  <td class="center"><?=$row['phones']?> </td>
  <td><input type="checkbox"></td>
</tr>
<? } ?>

</tbody>
</table>

Answer 1

您为此使用什么后端语言？ 如果您一次只需要显示一个表格，并且担心隐藏 (display:none) 多个 div，那么只需发送一个 AJAX 请求后端并呈现相应的表格。