宏弹出窗口不适用于数据表

Question

我将WebGrid用于我的MVC项目，因此决定将WebGrid更改为Datatable。之后，Magnific Popup停止工作。但是，当我使用WebGrid时，它正在工作。 这是我的代码；

var table = $("#demoGrid").DataTable({
        "ajax": {
            "url": "/Hasta/HastaGetir",
            "tye": "GET",
            "datatype": "JSON"
        },
        "columns": [
            {
                "data": null,
                "searchable": false,
                "orderable": true,
                "render": function (data) {

                    if ( data.Avukatlik  == true) {
                        return '<i title=\"Avukata Gönderildi\" class=\"fa fa-exclamation-circle\" style=\"color:red;\"></i>';
                    }
                    else {

                        return '';

                    }
                }
            },
            { "data": "AdiSoyadi", "autowidth": true },
            { "data": "TCKimlik", "autowidth": true },
            { "data": "Telefon", "autowidth": true },
            { "data": "Doktor", "autowidth": true },
            {
                "data": null,
                "sortable": false,
                "render": function (o) {
                    return "<span class=\"label label-default\" style=\"background-color:" + o.Renk + ";\">" + o.Risk + "</span>";
                }
            },
            { "data": "ToplamBorc", "autowidth": true },
            { "data": "ToplamOdeme", "autowidth": true },
            { "data": "Bakiye", "autowidth": true },
            {
                "data": null,
                "sortable": false,
                "render": function (o) {
                    return "<a class=\"btn btn-primary btn-xs ajax-popup\" title=\"Düzenle\" href=\"/Hasta/_HastaEkle?id=" + o.Id + "\"><i class=\"fa fa-pencil-alt\"></i></a> " +
                        "<a class=\"btn btn-danger btn-xs\" title=\"Sil\" href=\"javascript:HastaSil(" + o.Id + ")\"  id=\"sil" + o.Id + "\"><i class=\"fa fa-trash \"></i></a> " +
                        "<a class=\"btn btn-warning btn-xs\" title=\"Görüşme Ekle\" href=\"/HastaGorusme/GorusmeSayfasi?id=0&hastaId=" + o.Id + "\"><i class=\"fa fa-comments\"></i></a>" +
                        "<a class=\"btn btn-secondary btn-xs ajax-popup\" title=\"Büro Ekle\" href=\"/SabitTanimlar/HastaBuroEkle?hastaId=" + o.Id + "\"><i class=\"fa fa-gavel\"></i></a>";
                }
            }
        ],
        stateSave: true

    });


$(document).ready(function () {


    $(".ajax-popup").magnificPopup({
        type: 'ajax',
        ajax: {
            settings: null,
            // settings: {cache:false, async:false}
            mainClass: 'popup',
            cursor:
                'mfp-ajax-cur col-md-6', // CSS class that will be added to body during the loading (adds "progress" cursor)
            tError:
                '<a href="%url%">The content</a> could not be loaded.' //  Error message, can contain %curr% and %total% tags if gallery is enabled
        }

    });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
    <br />
    <div style="width:100%; margin:0 auto;">
        <table id="demoGrid" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Adı Soyadı</th>
                    <th>TC Kimlik</th>
                    <th>Telefon</th>
                    <th>Doktoru</th>
                    <th>Risk</th>
                    <th>Toplam Borç</th>
                    <th>Toplam Ödeme</th>
                    <th>Bakiye</th>
                    <th>İşlemler</th>
                </tr>
            </thead>
       </table>
    </div>
</div>

当我单击数据表中的按钮时，打开一个新页面而不是弹出窗口。我不知道该怎么解决。 我该怎么办？你能帮助我吗？