单击按钮时调用数据表答案

【问题标题】：call datatable on button click单击按钮时调用数据表
【发布时间】：2017-05-02 08:27:38
【问题描述】：

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

我的 JSON 与数据表不兼容

错误消息，

DataTables 警告：表 id=RegSrc - 请求的未知参数第 0 行第 1 列的“文件编号”

请帮忙

 <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": '细节控制', “可订购”：假， “数据”：空， “默认内容”：'' }, {数据：“文件编号”}， {数据：“全名”}， {数据：“出生日期”}， {数据：“年龄”} ],

    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}]

【问题讨论】：

你的 json 中的 DOB 在哪里？
请稍等修改帖子
我更正了表格的组成和最终的数组，，抱歉造成混乱
是括号导致我的问题吗？
现在您缺少 {data:"Age"}

标签： jquery json datatables

【解决方案1】：

我变了

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

到

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

它开始工作了

【讨论】：

【解决方案2】：

您的 JSON 在每行中包含两列，并且您的 dataTable 尝试在每行中填充四列，因此根据您的 JSON 请求，您的 dataTable 将如下所示。

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

【讨论】：