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

Question

当通过 ajax 调用加载数据时，我在运行时使用 DataTable。但它给了我这样的错误 Cannot read 属性 '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>

当我从数据表列中删除 { 'data': 'Rev' }, 时我的数据将进入 table.but 它存在然后错误调用。
请帮我解决这个错误。
非常感谢。

Answer 1

您在 DataTables 初始化中声明了 15 列数据，但在 HTML 中的 table 的 header 中只有 14 列。这就是删除 Rev 修复它的原因，因为它使数字匹配。只需在 header 中再添加一列，您应该就可以了。

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

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

javascript

jquery

datatables

asp.net-mvc-4