Javascript 从控制器操作获取数据到jquery datatable_Javascript_C#_Jquery_Asp.net_Datatables

Javascript 从控制器操作获取数据到jquery datatable

javascript c# jquery asp.net datatables

Javascript 从控制器操作获取数据到jquery datatable,javascript,c#,jquery,asp.net,datatables,Javascript,C#,Jquery,Asp.net,Datatables,我试图以JSON格式从controller action获取一些数据，然后使用AJAX将其发送到DataTables，显示数据，但当我搜索或排序数据时，数据消失，显示“找不到数据”消息，并且不再有任何页面，这只是一个长表 HTML表格： <table id="demoGrid" class="table table table-hover dt-responsive nowrap" width="100%" cellspacing="0"> <thead>

我试图以JSON格式从controller action获取一些数据，然后使用AJAX将其发送到DataTables，显示数据，但当我搜索或排序数据时，数据消失，显示“找不到数据”消息，并且不再有任何页面，这只是一个长表

HTML表格：

<table id="demoGrid" class="table  table table-hover dt-responsive nowrap" width="100%" cellspacing="0">
    <thead>
        <tr class="styleHeaderTab">
            <th class="th-sm">
                Matricule
            </th>
            <th class="th-sm">
                Intitulé
            </th>
            <th class="th-sm">
                Nombre de compte
            </th>
            <th class="">
            </th>
        </tr>
    </thead>
    <tbody id="chargeHolder"></tbody>
</table>

$(document).ready(() => getActif());
$('#demoGrid').dataTable({
        "language": {
            "search": "Rechercher",
            "lengthMenu": "Afficher _MENU_ chargés par page",
            "info": "Page: _PAGE_ / _PAGES_",
            "paginate": {
                "next": "Suivante",
                "previous": "Précédente"
            }
        }
    });
function getActif() {
        $.ajax({
            url: '/ChargeAffaire/GetActif',
            method: 'get',
            dataType: 'json',
            error: (err) => console.log(err),
            success: (res) => {
                let s="";
                for (let i=0;i<res.length;i++) {
                    s +=`<tr>
                            <td>${res[i].matricule}</td>
                            <td>${res[i].intitule}</td>
                            <td> 59</td>
                            <td id="linkContainer">
                                <a class="cls no-href" id="detail" onclick="update_url('consulter/${res[i].id}')" data-toggle="modal" data-target="#exampleModal">consulter</a>
                                <br/>
                                <a class="no-href" id="conge" onclick="updateConge(${res[i].id})" data-toggle="modal" data-target="#dateMission">Ajouter un congé</a>
                                <br/>
                                <a class="no-href" id="ajout"  onclick="updateAction(${res[i].id})" data-toggle="modal" data-target="#ajoutModal">Ajouter un compte</a>
                            </td>
                        </tr>`;
                }
                $("#chargeHolder").html(s);
                $(".no-href").css({"cursor":"pointer","color":"#077bb1"});
                $(".no-href").parent().css("text-align","center");
            }
        });
    }

[HttpGet]
        public ActionResult GetActif()
        {
            var list = ListCharges.list.FindAll(x => x.conge.etat == "Actif");
            return Json(list);
        }

使用外部jQuery方法，如

$.ajax（）

，

$.post（）

，

$.get（）

等来填充DataTable是一种非常糟糕的做法，因为您最终要处理混乱的解决方法，以便在必要时随时随地将数据加载到表中。相反，我建议采用期权

另一个不好的选择是手动编写表体HTML。DataTables完全可以为您做到这一点，只要使用/options指向列数据源即可

为了将某些表列呈现为任意HTML，还有另一个选项

最后，您可以使用option将HTML属性附加到单元格中

因此，完整的jQuery代码可能看起来像：

$(document).ready(() => {
    $('#demoGrid').dataTable({
        ajax: {
            url: '/ChargeAffaire/GetActif'
        },
        language: {
            search: "Rechercher",
            lengthMenu: "Afficher _MENU_ chargés par page",
            info: "Page: _PAGE_ / _PAGES_",
            paginate: {
                next: "Suivante",
                previous: "Précédente"
            }
        },
        columns: [
            {title: 'Matricule', data: 'matricule'},
            {title: 'Intitulé', data: 'intitule'},
            {title: 'Nombre de compte', data: () => ' 59'},
            {
                title: '', 
                data: rowData => `
                    <a class="cls no-href" id="detail" onclick="update_url('consulter/rowData.id')" data-toggle="modal" data-target="#exampleModal">consulter</a>
                    <br/>
                    <a class="no-href" id="conge" onclick="updateConge(rowData.id)" data-toggle="modal" data-target="#dateMission">Ajouter un congé</a>
                    <br/>
                    <a class="no-href" id="ajout"  onclick="updateAction(rowData.id)" data-toggle="modal" data-target="#ajoutModal">Ajouter un compte</a>`,
                createdCell: td => $(td).attr('id', 'linkContainer')
            }
        ],
        //append custom classes for the first 3 <th> and id attribute to <tbody>
        renderCallback: function(){
            this.api().columns().every(function(){
                if(this.index() < 3) $(this.header()).addClass('th-sm');
            });
            $('#demoGrid tbody').attr('id', 'chargeHolder');
        }
    });
});

$（文档）.ready（（）=>{
$（'#demoGrid'）。数据表({
阿贾克斯：{
url:“/chargeafaire/GetActif”
},
语言：{
搜索：“Rechercher”，
长度菜单：“AffigHer-Mayuug PaGue'Par页面”，
信息：“页面：\页面\页面/\页面”，
分页：{
下一个：“Suivante”，
上一篇：“公关”
}
},
栏目：[
{标题：'矩阵'，数据：'矩阵'}，
{标题：'Intitulé'，数据：'intitule'}，
{标题：'Nombre de compte'，数据：（）=>'59'}，
{
标题：“”，
数据：rowData=>`




`,
createdCell:td=>$（td.attr（'id'，'linkContainer'））
}
],
//将第一个3和id属性的自定义类附加到
renderCallback:函数（）{
this.api（）.columns（）.every（函数（））{
if（this.index（）<3）$（this.header（））.addClass（'th-sm'）；
});
$（'demoGrid tbody'）.attr（'id'，'chargeHolder'）；
}
});
});

虽然您的HTML可能很简单，如：

<table id="demoGrid" class="table  table table-hover dt-responsive nowrap" width="100%" cellspacing="0"></table>

我建议把你的CSS放在单独的文件中

为了在必要时重新加载数据，您可以简单地调用方法，如果需要，可以使用选项作为回调来操作发送到后端脚本的参数。