在两个JQuery数据表之间切换

时间:2013-08-18 15:36:09

标签: jquery ajax datatables

我有两个JQuery数据表(datatables.net),一个带有消息,第二个带有联系人。我想加载它们而不刷新页面,即如果我点击link1我会显示消息,如果我点击link2我会收到消息表disapear和联系人显示。我可以通过将表放在不同的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>

1 个答案:

答案 0 :(得分:0)

你使用的是哪种后端语言? 如果你需要一次只显示一个表,并且担心隐藏(display:none)几个div,那么只需发送一个AJAX请求后端并呈现相应的表。