数据表不适用于ajax调用
Posted
技术标签:
【中文标题】数据表不适用于ajax调用【英文标题】：Datatable not working on ajax call 【发布时间】：2018-02-28 05:45:54 【问题描述】：我在我的 Web 应用程序中使用 Datatable。 以下是我使用 ajax 获取数据的简单代码。
<script>
$(document).ready(function()
$('#mytable').DataTable();
);
</script>
<body>
<h2>AJAX SELECT</h2><hr>
<div align="center">
Select Team :
<select name="select" id ='teamSelect'>
<option value="">Select Value</option>
<option value="op2">Company 1</option>
</select>
</div>
<div id='tableContainer' align="center"></div>
<script>
$(function()
$("#teamSelect").bind("change", function()
$.ajax(
type: "GET",
url: "getData.php",
"dataSrc": "tableData",
success: function(html)
$("#tableContainer").html(html);
);
);
);
</script>
和Getdata.php代码
<table id="mytable" class="display" cellspacing="0" >
<thead>
<tr>
<th>First name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
</tr>
</tbody>
我将 Jquery、datatable css 和 js 都链接了。但它仍然以普通 HTML 表的形式返回输出。 没有发现控制台错误。 我需要数据表中的数据。那我怎样才能得到它。
我还在 index.php 页面中测试了数据表。它工作得很好。
【问题讨论】：
您的问题与this有些相关。 【参考方案1】：您在添加表之前初始化数据表。你需要在ajax中初始化它
删除以下脚本
<script>
$(document).ready(function()
$('#mytable').DataTable();
);
</script>
更新 ajax 如下：
<script>
$(function()
$("#teamSelect").bind("change", function()
$.ajax(
type: "GET",
url: "getData.php",
"dataSrc": "tableData",
success: function(html)
$("#tableContainer").html(html);
$('#mytable').DataTable(
"destroy": true, //use for reinitialize datatable
);
);
);
);
</script>
【讨论】：
它工作正常。但是你在 $('#mytable').DataTable((【参考方案2】：放
<script>
$(document).ready(function()
$('#mytable').DataTable();
);
</script>
Getdata.php 文件的底部还链接到数据表 css 和 js。
或者使用ajaxComplete function()来调用数据表。
【讨论】：
以上是关于数据表不适用于ajax调用的主要内容，如果未能解决你的问题，请参考以下文章