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对象时，它必须是具有一个具有表信息的字段“data”的对象。在您的情况下，当您通过response.data时，您将删除该格式。我认为你应该通过"ajax": response。

但无论如何，你无法简化这一切。您不需要销毁de 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'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();
    }
});

在jquery响应之后无法重新加载dataTable

1 个答案: