CODEWITHSUNDEEP
jqueryjsondatatables
JSON
JSON

Reputation: 1623

call datatable on button click

I have reached this so far,

my JSON is incompatible with the data table

Error msg,

DataTables warning: table id=RegSrc - Requested unknown parameter 'Filenum' for row 0, column 1

Please help 

 <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 code

    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" },

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

Button click function

    $("#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();
        },
    })

});

My JSON Array results

[{"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}]

Upvotes: 0

Views: 4385

Answers (2)

Bindrid
Bindrid

Reputation: 3735

I changed 

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

to 

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

and it started working

Upvotes: 1

Jeet
Jeet

Reputation: 80

Your JSON contains two column in each row and your dataTable trying to populate four column in each row, so as per your JSON request your dataTable will be as Below .

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

Upvotes: 1

Related Questions