不能在jquery响应后重新加载dataTable
不能在jquery响应后重新加载dataTable
提问于 2017-10-14 05:55:43
它是根据列表ID和子列表ID对datatable进行排序的sidenav
<div id="mySidenav" class="sidenav"> <!-- sidenav starting-->
<ul>
<li class="categoriesli">All Categories</li>
<?php
$result = mysqli_query($db, "SELECT id, name FROM categories WHERE c_id = 0");
while($row = mysqli_fetch_assoc($result)) { ?>
<div id="categorydiv_<?php echo $row['id']; ?>" onclick="showSubCat(<?php echo $row['id']; ?>)">
<li id="category_<?php echo $row['id']; ?>" class="categoriesli"><?php echo $row['name']; ?><span class="glyphicon glyphicon-triangle-right pull-right"></span></li>
</div>
<li style="padding: 0px;" class="subcategory">
<ul>
<?php
$result1 = mysqli_query($db, "SELECT c_id, id, name FROM categories WHERE c_id = '".$row['id']."'");
while($rows = mysqli_fetch_assoc($result1)) { ?>
<div id="subcatdiv_<?php echo $rows['id']; ?>" class="subcategory_<?php echo $rows['c_id']; ?>" style="display:none;">
<li id="subcategory_<?php echo $rows['id']; ?>" onclick="sortSubCat(<?php echo $rows['id']; ?>, <?php echo $row['id']; ?>)"><?php echo $rows['name']; ?></li>
</div>
<?php } ?>
</ul>
</li>
<?php } ?>
</ul>
</div>单击按钮前单击
尽管在数组中有json数据，但单击按钮后无法获取数据。
$(document).ready(function(){
dataTable = $("#datatableId").DataTable({
"ajax": "retrieve.php",
"order": []
});
});单击按钮后单击
function sortSubCat(subCatId, catId) {
$("#datatableId").DataTable().clear();
$("#datatableId").DataTable().destroy();
$.ajax({
url:"retrieve.php",
type:"POST",
dataType:"json",
data:{sub_cat_id:subCatId, cat_id:catId},
success:function(response){
console.log(response.data);
$("#datatableId").DataTable({
"ajax": response.data
});
}
});
}回答 1
Stack Overflow用户
回答已采纳
发布于 2017-10-14 06:19:17
首先是关于你的解决方案的评论。当创建DataTable对象的数据源是json对象时，它必须是一个具有表信息的字段" data“的对象。在您的示例中，您将在传递response.data时删除该格式。我认为你应该通过"ajax": response考试。
但无论如何，你不能简化所有这些。您不需要每次都销毁de DataTable对象并再次创建它。如果您使用ajax从外部源获取数据，并且只想重新加载表数据，只需使用可数据的.reload()函数.
$(document).ready(function(){
var subcatId='', catId='';
var myDataTable = $("#datatableId").DataTable({
"ajax": {
"url": "retrieve.php",
"type": "POST",
"dataType": "json",
"data": function(d) {
d.sub_cat_id = subcatId;
d.cat_id = catId;
}
},
"order": []
});
function sortSubCat(selSubCatId,selCatId) {
subCatId = selSubCatId;
catId = selCatId;
myDataTable.ajax.reload();
}
});事实上，如果您从两个subCatId下拉列表中获得select和catId，您甚至可以简化它(我只是给您一个示例，根据您的情况调整id's和html元素，还可以引入参数值验证等等)。
$(document).ready(function(){
var myDataTable = $("#datatableId").DataTable({
"ajax": {
"url": "retrieve.php",
"type": "POST",
"dataType": "json",
"data": function(d) {
d.sub_cat_id = $('select#subcatid').val();
d.cat_id = $('select#catid').val();
}
},
"order": []
});
$('button#sortsubcat').click(function() {
myDataTable.ajax.reload();
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46741399
复制相关文章
相似问题
腾讯云开发者
