Display jQuery DataTables with Ajax data source in a popup

Question

I am trying to give a list in a popup according to Ajax request. Before Ajax request , list is in popup but after Ajax request, list stay in the page instead of popup and also there is the old list in the popup window. Here is the codes

<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
        });
    });  

How can we put the list hostTable into popup after ajax request?

Answer 1

SOLUTION

Use onopen option to initialize the table, see the code below.

$(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

See this jsFiddle for code and demonstration.