在弹出窗口中显示带有Ajax数据源的jQuery DataTables

Question

我想根据Ajax请求在弹出窗口中给出一个列表。在Ajax请求之前，列表在弹出窗口中，但在Ajax请求之后，列表停留在页面而不是弹出窗口，并且在弹出窗口中还有旧列表。这里是代码

<script> 
function CreateMap() { 
    var chart = AmCharts.makeChart("piechartdiv", { 
     "type": "pie", 
     "theme": "light", 
     "fontFamily":"Calibri",  
     "dataProvider": [{ 
      "product":"Following", 
      "value": @following, 
      "color": "#009688" 
     }, { 
      "product":"Not Following", 
      "value": @notFollowing , 
      "color": "#555555" 

     }], 
     "legend": { 
      "align" : "right", 
      "fontSize" : 14 
     }, 
     "marginLeft":-100, 
     "marginTop":-45, 
     "marginBottom":0, 
     "labelsEnabled":false, 
     "colorField": "color", 
     "valueField": "value", 
     "titleField": "product", 
     "outlineAlpha": 0.4, 
     "depth3D": 15, 
     "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>", 
     "angle": 20, 
     "export": { 
      "enabled": true 
     } 
    }); 

    jQuery('.chart-input').off().on('input change', function() { 
     var property = jQuery(this).data('property'); 
     var target = chart; 
     var value = Number(this.value); 
     chart.startDuration = 0; 

     if (property == 'innerRadius') { 
      value += "%"; 
     } 

     target[property] = value; 
     chart.validateNow(); 
    }); 
    chart.addListener("clickSlice", function (event) { 
     if (event.dataItem.title == 'Unfollowing') 
     { 
      document.getElementById("s_open").click(); 
     } 
    }); 
} 
var isAjax = @isAjax; 
if(isAjax) 
{ 
    CreateMap(); 
} 
else 
{ 
    AmCharts.ready(function() { 
     CreateMap(); 
    }); 
} 

}

<button id="s_open" class="s_open btn-default" style="display:none;">Open popup</button> 

<div id="s_follow"> 
<div class="row" style="border-radius:5px; padding:20px; background-color:#fff;"> 
    <table id="hostTable" class="table table-striped" cellspacing="0"> 
     <thead> 
      <tr> 
       <th>Host Table</th> 
      </tr> 
     </thead> 
     <tbody> 
      @Html.Raw(comparedDataTable.ToString()) 
     </tbody> 
    </table> 
    <button class="btn s_close btn-danger">Close</button> 
</div> 

<script>  
    $(document).ready(function() { 
     $('#hostTable').DataTable({ 
      dom: 'Bfrtip', 
      buttons: [ 
       'excelHtml5', 
       'csvHtml5' 
      ], 
      destroy: true, 
     }); 
    }); 
    $(document).ready(function() { 
     // Initialize the plugin 
     $('#s_follow').popup({ 
      color: 'black', 
      opacity: 0.5, 
      transition: '0.3s', 
      scrolllock: true 
     }); 
    }); 

我们怎样才能把名单hostTable到弹出AJAX请求后？

Answer 1

SOLUTION

使用onopen选项初始化表，请参见下面的代码。

$(document).ready(function() { 
    $('#s_follow').popup({ 
     color: 'black', 
     opacity: 0.5, 
     transition: '0.3s', 
     scrolllock: true, 
     vertical: "top", 
     onopen: function() { 
      // If table was initialized before 
      if ($.fn.DataTable.isDataTable('#hostTable')){ 
       // Clear table 
       $('#hostTable').DataTable().clear(); 
      } 

      $('#hostTable').DataTable({ 
      dom: 'Bfrtip', 
      buttons: [ 
       'excelHtml5', 
       'csvHtml5' 
      ], 
      destroy: true 
      }); 
     } 
    }); 
}); 

DEMO

见this jsFiddle代码和演示。