jquery - 单击按钮时显示不同的数据表

Question

嗨，我正在创建一个应用程序，其中包含两个表，一个用于学生成绩，另一个用于学生联系人我正在使用数据表来显示数据。当文档加载时，学生成绩表显示完美

jQuery

$(document).ready(function() {
var otable = $('#student_results').datatable({'sAjaxSource': "server.php"});

$("button#contacts").click(function(){

$("div #results table").replaceWith('<table cellpadding="0" cellspacing="0" border="0"     
class="display" id="example">
<thead>
<tr><th width="5%">id</th><th width="35%">name</th>
<th width="30%">number</th>
<th width="30%">department</th></tr>
</thead>
<tbody>
<tr><td colspan="3" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
<tfoot><tr><th width="5%">id</th><th width="35%">name</th>
<th width="30%">number</th><th width="30%">department</th></tr>
</tfoot>
</table>');
example.fnReloadAjax('server_processing.php');
});


});

HTML

<div id="results">
<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button id="Result">Results</button>
<button id="contacts">Contacts</button>

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
  <thead>
    <tr>
      <th width="2%">result_id</th>
      <th width="20%">reg_no</th>
      <th width="30%">name</th>
      <th width="15%">unit code</th>
      <th width="30%">unit title</th>
      <th width="3%">grade</th>
    </tr>
  </thead>
  <tbody>
    <br>
    <tr>
      <td colspan="3" class="dataTables_empty">Loading data from server</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th width="2%">result_id</th>
      <th width="20%">reg_no</th>
      <th width="30%">name</th>
      <th width="15%">unit code</th>
      <th width="30%">unit title</th>
      <th width="3%">grade</th>
    </tr>
  </tfoot>
</table>
</div>

请帮忙。