Javascript 无法在jquery响应后重新加载数据表
HTML 它是根据列表ID和子列表ID对数据表进行排序的sidenavJavascript 无法在jquery响应后重新加载数据表,javascript,php,jquery,Javascript,Php,Jquery,HTML 它是根据列表ID和子列表ID对数据表进行排序的sidenav <div id="mySidenav" class="sidenav"> <!-- sidenav starting--> <ul> <li class="categoriesli">All Categories</li> <?php $result = mysqli_query($db, "SELECT id, name FROM categorie
<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>
点击按钮后
首先是对您的解决方案的评论。当DataTable对象创建的数据源是json对象时,它必须是一个包含表信息的字段数据的对象。在您的情况下,当您传递response.data时,您正在删除该格式。我认为您应该通过ajax:response 但无论如何,你不能简化所有这些。您不需要每次都销毁de DataTable对象并重新创建它。如果您使用ajax从外部源获取数据,并且只想重新加载表数据,只需使用datatables.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和catId,你甚至可以进一步简化它我只是给你一个例子,根据你的情况调整id和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();
}
});
为什么不使用ajax内置数据表?检查控制台是否有错误。我得到了无效的JSON响应错误@urfusionBingo,您得到了答案,您得到的响应不是JSON格式,或者JSON无效。如果响应不是json格式,请尝试json_encode,如果是json格式,请检查在数组[Array[6]]上是否有类似@urfusione的ajax响应,每次我获取除functionMmm中提到的ID之外的所有数据时。。。我懂了。我已经编辑了答案。试试看,让我知道情况如何。你是对的。我从两个select下拉列表中获取ID,但是ID是动态的。我如何才能将它们放入。可能使用它们在div、表等中的DOM位置。?下拉列表在哪里编辑您的问题并粘贴html以便能够看到它?抱歉,这是一个用于排序数据表的侧导航。我更新了我的html
$(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();
}
});
$(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();
}
});