单击按钮调用DataTable

Question

我到目前为止已经达到了这一点，

我的JSON与数据表不相容

错误msg，

DataTables警告：表ID = regsrc-请求未知参数 第0列第1列的" filenum"

请帮助

 <table id="RegSrc" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th></th>
                                                <th><b>File Number</b></th>
                                                <th><b>Patient Name</b></th>
                                                <th><b>DOB</b></th>
                                                <th><b>Age</b></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>

JS代码

    var Table = $('#RegSrc').DataTable({
    data: [],
    "columns": [
        {
            "className": 'details-control',
            "orderable": false,
            "data": null,
            "defaultContent": '<i data-toggle class="fa fa-plus-square-o text-primary h5 m-none" style="cursor: pointer;"></i>'
        },
        { data: "Filenum" },
        { data: "FullName" },
        { data: "DOB" },

"列"：[ { " className"：'详细信息控制'， "订购"：false， "数据"：null， " DefaultContent"：'' }，， {数据：" filenum"}， {data：" fullname"}， {数据：" dob"}， {数据："年龄"} ]，

    rowCallback: function (row, data) { },
    filter: false,
    info: false,
    ordering: false,
    processing: true,
    retrieve: true
})

按钮单击功能

    $("#srcmdlfrmbtn").on("click", function (event) {
    var obj = {}
    obj.SrchTxt = $('#srctxt').val(),
    obj.FnameSrctxt = $('#fnamesrc').val(),
    obj.SnameSrctxt = $('#snamesrc').val(),
    obj.TnameSrctxt = $('#tnamesrc').val(),
    obj.LnameSrctxt = $('#lnamesrc').val(),
    obj.TelSrcTxt = $('#telsrc').val(),
    obj.SSNSrcTxt = $('#ssnsrc').val(),
    obj.EmailSrctxt = $('#emailsrc').val(),
    obj.DOBSrcTxt = $('#dobsrc').val()
    $.ajax({
        contentType: "application/json; charset=utf-8",
        url: "../CONFIG/WebSerTblsSearch.asmx/SrcTblReg",
        type: "Post",
        data: JSON.stringify(obj),
        dataFilter: function (res) {
            var parsed = JSON.parse(res);
            var morp = JSON.parse(parsed.d);
            console.log(JSON.stringify( morp ))
            //return JSON.stringify({ data: morp });
            Table.clear().draw();
            Table.rows.add(JSON.stringify({ data: morp })).draw();
        },
    })
});

我的JSON阵列结果

[{"Filenum":15090248,"FullName":"Ahmad Morsi abdul fattah Abu Maizer","DOB":"05 Dec 2017","Age":0},{"Filenum":170418115,"FullName":"Ahmad Morsi abdul fattah Abu Maizer","DOB":"05 Dec 2017","Age":0},{"Filenum":170418116,"FullName":"Ahmad Morsi abdul fattah Abu Maizer","DOB":"05 Dec 2017","Age":0},{"Filenum":170227111,"FullName":"asd dsf as a","DOB":"27 Feb 2017","Age":0},{"Filenum":15112775,"FullName":"marwam saleh moh saleem","DOB":"26 Nov 2015","Age":2},{"Filenum":15112777,"FullName":"marwam saleh moh saleem","DOB":"26 Nov 2015","Age":2},{"Filenum":15120996,"FullName":"marwam mohmmad  saleem","DOB":null,"Age":null},{"Filenum":160215104,"FullName":"marwam mohmmad abdul fattah Abu Maizer","DOB":"12 Mar 2016","Age":1},{"Filenum":15112270,"FullName":"mohammad j saleh raqaad","DOB":"22 Nov 2015","Age":2},{"Filenum":15112772,"FullName":"salem mohmmad john sarjes","DOB":"22 Oct 2011","Age":6}]

Answer 1

我更改了

        Table.clear().draw();
        Table.rows.add(JSON.stringify({ data: morp })).draw();

to

  Table.clear().draw();
  Table.rows.add( morp ).draw();

它开始工作

Answer 2

您的JSON在每行中包含两个列，并且您的DataTable试图在每行中填充四列，因此根据您的JSON请求，您的数据表将如下。

 <table id="RegSrc" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th><b>File Number</b></th>
            <th><b>Patient Name</b></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

JS：

var Table = $('#RegSrc').DataTable({
    data: [],
    "columns": [
        {
            "className": 'details-control',
            "orderable": false,
            "data": null,
            "defaultContent": '<i data-toggle class="fa fa-plus-square-o text-primary h5 m-none" style="cursor: pointer;"></i>'
        },
        { data: "Filenum" },
        { data: "FullName" },
    ],
    rowCallback: function (row, data) { },
    filter: false,
    info: false,
    ordering: false,
    processing: true,
    retrieve: true
})