ajax向php服务端请求数据用datables显示,数据有但显示“No data available in table”

1、我是一个半全栈,主要iOS开发所以前端技能不是很佳
2、情景:ajax向php服务端请求数据,数据成功后dom操作加载到jquery datables上显示。虽然显示了但是在第一行tr显示“No data available in table”

3、关键代码:

//html
<div class="table-responsive">
                                    <table id="sample-table-2" class="table table-striped table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th class="center">
                                                <label>
                                                    <input type="checkbox" class="ace" />
                                                    <span class="lbl"></span>
                                                </label>
                                            </th>
                                            <th class="center">产品名称</th>
                                            <th class="center">产品分类</th>
                                            <th class="hidden-480 center">产品等级</th>
                                            <th class="hidden-480 center">产品单价</th>
                                            <th class="center">产品库存</th>
                                            <th class="center">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
//js
$.ajax({
            dataType: "json",
            type: "get",
            url: "../controller/productlist.php",
            success: function(data) {
                        if(data.code == 200){
                           //$des = $("#sample-table-2>tbody");
                            var datas = data.data;
                            if(jQuery.isEmptyObject(datas) || datas.length == 0){
                                alert("暂无数据");
                            }
                            for(var i=0;i<datas.length;i++){
                                var tr = "<tr>";
                                tr += '<td class="center"><label><input type="checkbox" class="ace" /><span class="lbl"></span></label></td>';
                                tr += '<td class="center" id="hotelName">'+datas[i].productName+'</td>';
                                tr += '<td class="hidden-480 center">'+datas[i].productBigKind+datas[i].productSmallKind+'</td>';

                                tr += '<td class="center">'+datas[i].productLevel+'</td>';
                                tr += '<td class="hidden-480 center" >'+datas[i].price+'</td>';
                                tr += '<td class="hidden-480 center" >'+datas[i].storage+'</td>';
                                tr += '<td class="hidden-480 center" >'+datas[i].storage+'</td>';
                                tr += "</tr>";


                                /*
                                var tr = $("<tr></tr>").appendTo($des);
                                var td1 = $('<td class="center"><label><input type="checkbox" class="ace" /><span class="lbl"></span></label></td>').appendTo(tr);
                                var td2 = $('<td class="center" id="hotelName">'+datas[i].productName+'</td>').appendTo(tr);
                                var td3 = $('<td class="hidden-480 center">'+datas[i].productBigKind+datas[i].productSmallKind+'</td>').appendTo(tr);
                                var td4 = $('<td class=" center">'+datas[i].productLevel+'</td>').appendTo(tr);
                                var td5 = $('<td class=" hidden-480 center">'+datas[i].price+'</td>').appendTo(tr);
                                var td6 = $('<td class=" hidden-480 center">'+datas[i].storage+'</td>').appendTo(tr);

                                var td7 = $('<td class="center"><div class="visible-md visible-lg visible-sm  action-buttons"><a  class="btn btn-xs btn-info"  role="button" href="editproduct.php?id='+datas[i].id+'" id="edit'+datas[i].id+'"><i class="icon-remove bigger-120">修改</i></a>  <a  class="btn btn-xs btn-warning"  role="button" id="delete'+datas[i].id+'"  onclick="deleteProduct('+datas[i].id+');"><i class="icon-remove bigger-120"  >删除</i></a></div></td>').appendTo(tr);
                                */
                                $("#sample-table-2 tbody").append(tr);

                            }


                            $("#sample-table-2").DataTable();
                        }
            },
            error: function(code,message,data) {
                alert("发生错误:"+message);
            }
        });

3、去Stack Overflow看到也有人遇到同样问题,链接:Stack Overflow问题地址有人解决了,我按照该方法去尝试,没有成功,各位大佬帮我看看哈,感谢🙏

查看回复