错误：通过 ajax jquery 加载数据时无法读取未定义的属性“样式”

Posted 2023-03-08

【中文标题】错误：通过 ajax jquery 加载数据时无法读取未定义的属性“样式”

【英文标题】：Error: Cannot read property 'style' of undefined when data load through ajax jquery

【发布时间】：2019-07-26 14:26:34

【问题描述】：

当通过 ajax 调用加载数据时，我在运行时使用 DataTable。但它给了我错误，例如无法读取未定义的属性“样式”。

            $('#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"  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' , 时，我的数据将进入表中。但它存在然后错误调用。 请帮我解决这个错误。 非常感谢。

【问题讨论】：

如果您有带有<th> 标记的其他列少于或多于DataTable 中定义的总列，则可能会发生此错误。您可以查看其他可能的原因here。

【参考方案1】：

您在 DataTables 初始化中声明了 15 列数据，但在 HTML 中的表头中只有 14 列。这就是删除 Rev 修复它的原因，因为它使数字匹配。只需在标题中添加另一列即可。