不能重裝的dataTable

Question

HTML

這是一個sidenav的數據表根據列進行排序ID和子表的ID

<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對象時，它必須是具有一個包含表信息的字段「data」的對象。在你的情況下，當你通過response.data時，你將刪除該格式。我想你應該通過"ajax": response。

但無論如何，你不能簡化所有這一切。您不需要銷燬de DataTable對象並每次都重新創建它。如果你從與阿賈克斯外部源獲取你的數據，你只是想重新加載表數據，只需要使用數據表.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 2名select的下拉列表中，你甚至可以把它簡化以上（我只是給你一個例子，適應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(); 
    } 
});