Error: Cannot read property 'style' of undefined when data load through ajax jquery

Question

I use DataTable at Runtime when data is loaded through ajax call. but it gives me error like Cannot read property 'style' of undefined.

            $('#CustCode').on("change", function () {
                $('#example').DataTable().destroy();
                $('#tblbody').empty();
                $.fn.ABC();
            });

$.fn.ABC = function () {
                var Cust = $("#CustCode").children("option:selected").text();
                var val = $('input[type=radio][name=Status]:checked').val();
                var yr = $("#Year").children("option:selected").val();
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("GetOADetailByCustomer", "Order")',
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({ 'custcode': Cust, 'status': val, 'yr': yr }),
                    success: function (Orderlist) {
                        debugger;
                        if (Object.keys(Orderlist).length > 0) {
                            $('#tblbody').text("");
                            BindData(Orderlist);
                        }
                        else {
                            $('#tblbody').text("");
                            var text = "No Data found.";
                            $('#tblbody').append(
                                '<tr class="odd"><td valign="top" colspan="14" class="dataTables_empty">'
                                + text + '</td></tr>');
                        }
                    },
                    error: function () { alert('Error. Please try again.'); }
                });
            };
            var BindData = function (response) {
                 $('#example').DataTable({
                    data: response,
                    responsive: true,
                    "pagingType": "full_numbers",
                    "lengthMenu": [
                      [10, 25, 50, -1],
                      [10, 25, 50, "All"]
                    ],
                    columns: [
                         { 'data': 'ID' },
                         { 'data': 'OANO' },
                         { 'data': 'OADate' },
                         { 'data': 'PONO' },
                         { 'data': 'PODATE' },
                         { 'data': 'POLI' },
                         { 'data': 'MOULDCODE' },
                         { 'data': 'DESCRIPTION' },
                         { 'data': 'Drg' },
                         { 'data': 'Rev' },
                         { 'data': 'METALNAME' },
                         { 'data': 'QTY' },
                         { 'data': 'UNITName' },
                         { 'data': 'DELIVERYDT' },
                         {
                             'data': 'Website',
                             'sortable': false,
                             'searchable': false,
                             'render': function (webSite) {
                                 if (!webSite) {
                                     return 'N/A';
                                 }
                                 else {
                                     return '<a href=' + webSite + '>'
                                         + webSite.substr(0, 10) + '...' + '</a>';
                                 }
                             }
                         },
                    ],
                    language: {
                        search: "_INPUT_",
                        searchPlaceholder: "Search records",
                    }
                });
            }

<div class="col-md-3">
                <p>
                    @Html.DropDownList("CustCode", Session["cust"] as SelectList, "-- Select Customer-- ", htmlAttributes: new { @class = "selectpicker", data_style = "select-with-transition" })
                </p>
            </div>

<table id="example" class="table table-striped table-no-bordered table-responsive table-hover" cellspacing="0" width="100%" style="width:100%">
                <thead>
                    <tr>
                        <th nowrap>
                            @Html.DisplayNameFor(model => model.SOA.ID)
                        </th>
                        <th nowrap>
                            @Html.DisplayNameFor(model => model.OA.OANO)
                        </th>
                        <th nowrap>
                            @Html.DisplayNameFor(model => model.OA.OADATE)
                        </th>
                        <th nowrap>
                            @Html.DisplayNameFor(model => model.OA.PONO)
                        </th>
                        <th nowrap>
                            @Html.DisplayNameFor(model => model.OA.PODATE)
                        </th>
                        <th nowrap>
                            @Html.DisplayNameFor(model => model.SOA.POLI)
                        </th>
                        <th nowrap>
                            @Html.DisplayNameFor(model => model.SOA.MOULDCODE)
                        </th>
                        <th nowrap>
                            @Html.DisplayNameFor(model => model.SOA.DESCRIPTION)
                        </th>
                        <th nowrap>
                            @Html.DisplayNameFor(model => model.SOA.Drg)
                        </th>
                        <th nowrap>
                            @Html.DisplayNameFor(model => model.SOA.Rev)
                        </th>
                        <th nowrap>
                            @Html.DisplayNameFor(model => model.SOA.METALCODE)
                        </th>
                        <th nowrap>
                            @Html.DisplayNameFor(model => model.SOA.QTY)
                        </th>
                        <th nowrap>
                            @Html.DisplayNameFor(model => model.SOA.UNIT)
                        </th>
                        <th nowrap>
                            @Html.DisplayNameFor(model => model.SOA.DELIVERYDT)
                        </th>
                    </tr>
                </thead>
                <tbody id="tblbody" style="overflow-x:scroll;"></tbody>
            </table>

when i remove { 'data': 'Rev' }, from datatable column than my data will come in table.but it exists then error invokes.
Plz, Help me to solve this error.
Many thanks in advance.

This error may occur if you have additional column(s) with `` tags are less or more than total columns defined in `DataTable`. You can see other possible causes [here](https://stackoverflow.com/questions/39376658/datatables-cannot-read-property-style-of-undefined?rq=1). — Tetsuya Yamamoto, Mar 05 '19 at 07:42

score 2 · Accepted Answer · answered Mar 05 '19 at 07:44

You're declaring 15 columns of data in the DataTables initialisation, but there is only 14 columns in the table's header in the HTML. That's why removing Rev fixes it, because it makes the numbers match. Just add another column to the header and you should be good.

Error: Cannot read property 'style' of undefined when data load through ajax jquery

1 Answers1