ajax获取数据更新table以后，jquery.datatable的js效果失效了该怎么办呀QAQ？

Question

用了jquery的模板表格，如果table里面放的是静态数据的话，选择展示多少条数据、搜索表格内容的功能都是正常的。
但用ajax从后台获取实际上的数据，append到tbody里面这样的形式后，就发现上面这些功能都失效了。

菜鸡学艺不精，网上的方法都试过了，都不行。
感觉好像是同步异步的问题，但不知道该怎么解决，求大佬指路QAQ。

这个是html：

<div class="table-responsive">
    <table id="dataTable1" width="100%" class="table table-striped table-lightfont" style="font-size: 15pt">
        <thead >

        <!-- 第二版结果展示 -->
            <tr>
                <!-- <th>ID</th> -->
                <th>站名</th>
                <th>设备名称</th>
                <th>电压等级</th>                               
                <th>采样时间</th>                               
                <th>相位</th>
                <th>最大过电压(kV)</th>
            </tr>   
            <!-- ID，站名，设备名称，电压等级，采样时间，相位，最大电压值 -->
        </thead>
        <tfoot>

            <!-- 第二版结果展示 -->
            <tr>
                <!-- <th>ID</th> -->
                <th>站名</th>
                </th>设备名称</th>
                <th>电压等级</th>                               
                <th>采样时间</th>                               
                <th>相位</th>
                <th>最大过电压(kV)</th>
            </tr>   
        </tfoot>
        <tbody  id="searchBody">

        </tbody>
        </table>
</div>

这个是js：

function search() {
    //alert($("#station").val())

    var station = $("#station").val()
    var start_time = $("#start_time").val()
    //alert(start_time.toUpperCase)
    var end_time = $("#end_time").val()
    var start_hour = $("#start_hour").val()
    alert(start_time.toUpperCase)
    var end_hour = $("#end_hour").val()
    var level = $("#selectLevel").val()

    var flag = false;    //标识，表示页面上数据还未处理完成
    $.ajax({
        type : "get",
        url : "observe/search",
        data : $("#searchForm").serialize(),
        success : function(data) {
            /*table = $('#dataTable1').DataTable( {
                    retrieve: true,
                    destroy:true,
                    paging: false
            } );*/

            //alert("sucess!")
            //var length=getJsonLength(data);
            console.log(data)
            var arrData = eval(data);

            //alert(data[0].sampdate)
            var searchBody = $("#searchBody");
            $("#searchBody").html("");
            //var dataTable1 = $("dataTable1");
            //$("#dataTable1").html("");

            //var bodyInfo="";
            //var tableInfo="";

            if (data) {
                for (var i = 0; i < arrData.length; i++) {
                    //ID，站名，设备名称，电压等级，采样时间，相位，最大电压值 
                    var row = “【不重要，略过】";
                    searchBody.append(row);
                    //bodyInfo+=row;
                }
                flag=true;

            }

            else {
                alert("数据库故障或无数据！");
            }
        }
    });

    var loadFile;
    loadFile = setInterval(function() {//定时检测    
        if(flag) {//如果数据已经处理完毕
            //loadAlljscssFile();
            loadjscssfile('static/js/jquery-3.2.1.min.js', "js"); //加载你的js文件
                loadjscssfile('static/bootstrap-3.3.7/css/bootstrap.min.css', "css"); //加载你的css文件
                loadjscssfile('static/bootstrap-3.3.7/js/bootstrap.min.js', "js"); //加载你的js文件
                loadjscssfile('bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css', "css"); //加载你的js文件
                loadjscssfile('bower_components/datatables.net/js/jquery.dataTables.min.js', "js"); //加载你的js文件

                clearTimeout();//取消定时检测节省开销
                }
        },50);

}

Answer 1

首先，DataTables.js 插件本身是可以接收 ajax 请求的：

return $("#"+tableId).DataTable({
        "dom": 'lrtip',
        "searching": false,
        "processing": true,
        "serverSide":true,
        "sAjaxSource": ajaxRequestUrl,
        "columns":columns,
        "ordering":false,
        "bDestroy":true,
        "language": {
            "sProcessing":"加载中...",
            "lengthMenu": "每页显示 _MENU_ 项记录",
            "zeroRecords": "没有找到记录",
            "info": "第 _START_ 到 _END_ 项记录 (共 _TOTAL_ 项记录)",
            "infoEmpty": "没有记录",
            "sInfoFiltered": "(全部记录数 _MAX_ 条)",
            "paginate": {
                "first":      "第一页",
                "last":       "最末页",
                "next":       "下一页",
                "previous":   "上一页"
            }
        }
    });

用这种方式直接对列表通过 ajax 请求数据初始化即可。
其次，如果需要执行页面刷新请求，或者按钮搜索，可以再调用一次该方法，重新渲染列表。ajaxRequestUrl 和 columns 是 参数。