javascript - jquery 响应后无法重新加载 dataTable

Question

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>

点击按钮前

尽管在数组中获取了 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
            });

        }
    });
}

Answer 1

首先评论一下您的解决方案。当 DataTable 对象创建的数据源是一个 json 对象时，它必须是一个具有一个字段“数据”的对象，该字段具有表信息。在您的情况下，您在传递 response.data 时删除了该格式。我认为您应该通过 "ajax": response。

但无论如何，您无法简化所有这些。您不需要每次都销毁 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();
    }
});

事实上，如果您从两个 select 下拉列表中获取 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();
    }
});