Javascript 无法在jquery响应后重新加载数据表

Javascript 无法在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

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 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();
    }
});