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>

请帮忙。

在按钮单击上显示不同的数据表

0 个答案: