javascript - 在弹出窗口中显示带有 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
        });
    });  

我们如何在ajax请求后将列表hostTable放入弹出窗口？

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用于代码和演示。