oldbee0925 2023-01-24 11:18 采纳率: 91.4%
浏览 40
已结题

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()事件中初始化,所有都正常的啊,重新加载就出问题了。请教各位,我到底是哪里错了?

  • 写回答

3条回答 默认 最新

  • 阳光宅男xxb 2023-01-24 12:21
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 2月1日
  • 已采纳回答 1月24日
  • 修改了问题 1月24日
  • 创建了问题 1月24日