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

Question

HTML

It is a sidenav to sort the datatable according to list ID's and Sub-list ID's

<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>

Before button click

I can't get data after button click despite got the json data in an array

$(document).ready(function(){
  dataTable = $("#datatableId").DataTable({
     "ajax": "retrieve.php",
     "order": []
  });
});

After button click

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

First a comment about your solution. When the source of data for the DataTable object creation is a json object, it has to be an object with one field "data" that has the table info. In your case, you're removing that format when you pass response.data . i think you should pass "ajax": response .

But anyway, you can't simplify all that. You don't need to destroy de DataTable object and create it again every time. If you're getting your data from and external source with ajax and you just want to reload the table data, just use datatables .reload() function...

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

In fact, if you're getting subCatId and catId from two select dropdowns, you could even simplify it more (I'm just giving you an example, adapt the id's and html elements to your case, you can also introduce parameters value validation, etc.)...

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