Javascript 使用搜索时，在jQuery数据表中添加自定义行后，数据行将重置

我有一个问题，我正在dataTable中添加自定义样式行，它工作正常。更新表时，也会显示新添加的数据，但当用户使用dataTable中的默认搜索框时，它会从以前的数据刷新

这是我的代码：

<table id="tbl_1" class="table table-striped table-bordered table-hover" width="100%">
<thead>
    <tr>
        <th><span style="font-size:11px;">Office Name</span></th>
        <th><span style="font-size:11px;">Year</span></th>
        <th>&nbsp;</th>
        <th>&nbsp;</th>
        <th>&nbsp;</th>
        <th>&nbsp;</th>
    </tr>
</thead>
<tbody></tbody>
</table>

<script >
$.get(url, {
    Year: Year
}, function(data) {
    $("#tbl_1 > tbody").html("");
    if (data.length == 0) {
        $("#tbl_1 > tbody").append("<tr>" +
            "<td colspan='6' style='text-align:center'> No Data.</td> <td style='display: none;'></td><td style='display: none;'></td><td style='display: none;'></td><td style='display: none;'></td><td style='display: none;'></td>" +
            "</tr>");
        swal("No DPCC For Approval. Have a nice day!", "", "success");

    } else {
        $.each(data, function(a, b) {
            var t_4 = "";

            if (b.t_4 == 1) {
                t_4 = '<span class="fa fa-circle" style="color:#1ee504"></span>';
            } else if (b.t_4 == 0) {
                t_4 = '<span class="fa fa-circle" style="color:#e50417"></span>';
            }

            $("#tbl_1 > tbody").append("<tr>" +
                "<td width='60%' style='text-align:center;color:black'><b>" + b.t_2 + "</b></td>" +
                "<td width='5%' style='text-align:center;color:black'><b>" + b.t_3 + "</b></td>" +
                "<td width='5%' style='text-align:center'>" + t_4 + "</td>" +
                "<td width='10%'><button type='button' class='btn btn-success btn-outline' onclick='Approve_1(" + b.t_1 + ")'><span class='fa fa-check'></span><span class='hidden-sm hidden-xs hidden-md'> Approve</span></button></td>" +
                "<td width='10%'><button type='button' class='btn btn-danger btn-outline' onclick='Return_1(" + b.t_1 + ")'><span class='fa fa-undo'></span><span class='hidden-sm hidden-xs hidden-md'> Return</span></button></td>" +
                "<td width='10%'><button type='button' class='btn btn-primary btn-outline' onclick='View_1(" + b.t_1 + ")'><span class='fa fa-file'></span><span class='hidden-sm hidden-xs hidden-md'> View</span></button></td>" +
                "</tr>");
        });
    }
}).done(function() {
    if ($.fn.dataTable.isDataTable('#tbl_1')) {
        table = $('#tbl_1').DataTable();
    } else {
        table = $('#tbl_1').DataTable({
            "bInfo": false,
            "lengthChange": false
        });
    }
});
</script>

办公室名称
年
$.get（url{
年份：年份
}，函数（数据）{
$（“#tbl_1>tbody”）.html（“”）；
如果（data.length==0）{
$（“#tbl_1>tbody”）。追加（“”+
“没有数据。”+
"");
swal（“无需DPCC批准。祝您愉快！”、“成功”）；
}否则{
$。每个（数据、函数（a、b）{
var t_4=“”；
如果（b.t_4==1）{
t_4=''；
}else如果（b.t_4==0）{
t_4=''；
}
$（“#tbl_1>tbody”）。追加（“”+
“”+b.t_2+“”+
“+b.t_3+”+
“+t_4+”+
“批准”+
“返回”+
“视图”+
"");
});
}
}).done（函数（）{
如果（$.fn.dataTable.isDataTable（'#tbl_1'））{
table=$（'#tbl_1'）。数据表（）；
}否则{
表=$（'#tbl_1'）。数据表({
“bInfo”：假，
“长度变化”：错误
});
}
});