bootstrap的datatable重新加载数据后,为什么样式失效(分页、搜索不能用)?

我的前端时bootstrap和jqurey,后端是django。
后台django传入前端json字符串,通过datatable来显示数据。我在前端通过ajax到后端调取数据库内容,生成json字符串传入前端,然后就
出问题了:datatable的样式实效,原先好好的分页、搜索也不起作用了。下面的我的代码:
后端


       df_arp_mysql = df_arp_mysql.to_json()#此处将一个dataframe转为json
       return JsonResponse(df_arp_mysql,safe = False)#返回前端json

前端


                   $.ajax({    
                        url:'{% url "ajax_update_ARP" %}', 
                        type:"POST",
                        data:{"json_update_ARP":JSON.stringify(ARP_list_td) },
                        success:function(net_arp){
                     json_arp = JSON.parse(net_arp);//将后端返回的值转化为jq的json
                    str = ""         //以下生成datatable数据区的html文本
                    for(var i = 0;i <(Object.keys(json_arp['IP']).length); i++)
                       {
                        str =str + "<tr id ='ARP_table'>" +
                            "<td><input type = 'radio'  name = 'ARP_select'  ></td>" + 
                            "<td>" + json_arp['Num'][i] + "</td>" +
                            "<td>" + json_arp['IP'][i] + "</td>" +
                            "<td>" + json_arp['bak'][i] + "</td>" +
                            "<td>" + json_arp['VLAN'][i] + "</td>" +
                            "<td>" + json_arp['interface'][i] + "</td>" +
                            "<td>" + json_arp['collect_time'][i] + "</td>" +                            
                            "</tr>";
                        
                       }  
                       
                       
                      
                       $("#arp_list").html(str);//在datatable数据区重写html   
                      //下面调用datatable方法。datatable_ARP_list是ID
                       $("#datatable_ARP_list").DataTable({
    "bLengthChange": false,
    "singleSelect" : false,
    "bFilter": true   ,
    retrieve: true  })  ;     //retrieve: true 参数的用途:丢弃原有数据并复用       
    
                          });

我的ajax放在windows.load()事件中初始化,所有都正常的啊,重新加载就出问题了。请教各位,我到底是哪里错了?

相当于二次多次加载页面出错,那你需要在ajax中考虑到多次加载的问题啊,我看你是在里面动态生成页面元素,那你是不是要考虑,二次加载时,之前生成的页面元素要清空

我一般是这么写的,ajax是作为datatable的属性

var datatable_check = $('#datatable');
var table = datatable_check.DataTable({
    'lengthChange': false,
    'info': false,
    'ordering': false,
    'pageLength': 10,
    'paging': true,
    'language': {
        'search': '搜索:',
        'zeroRecords': '未查询到数据',
        'paginate': {
            'next': '下一页',
            'previous': '上一页',
        }
    },
    'serverSide': true,
    'ajax': {
        'url': '{% url "ajax_update_ARP" %}',
        'type': 'post',
        'data': {
            '参数key': '参数value'
        },
        'dataSrc': function (data) {
            // return 的是返回的data数据
            return data.data;
        }
    },
    'columns': [
        { 'data': 'Num' },
        { 'data': 'Ip' },
        { 'data': 'bak' }
    ]
});

好焦虑,想不出办法了