单击按钮即可调用数据表 [英] call datatable on button click

查看:68
本文介绍了单击按钮即可调用数据表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我到目前为止已经达到了,

I have reached this so far,

我的JSON与数据表不兼容

my JSON is incompatible with the data table

错误消息,

DataTables警告:表id = RegSrc-请求的未知参数 第0行第1列的"Filenum"

DataTables warning: table id=RegSrc - Requested unknown parameter 'Filenum' for row 0, column 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":'细节控制', 可订购":false, 数据":null, "defaultContent":" }, {data:"Filenum"}, {data:"FullName"}, {data:"DOB"}, {数据:年龄"} ]

"columns": [ { "className": 'details-control', "orderable": false, "data": null, "defaultContent": '' }, { data: "Filenum" }, { data: "FullName" }, { data: "DOB" }, { data: "Age" } ],

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

推荐答案

我更改了

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

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

它开始工作

这篇关于单击按钮即可调用数据表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆