jQuery datatable uncaught TypeError：无法读取属性＆＃39;匹配＆＃39;未定义的

时间：2018-04-26 20:42:22

标签： jquery html asp.net ajax datatables

我使用以下代码创建了嵌套数据表。外部数据表运行良好但内部数据表因错误而停止。这是错误：

  

未捕获TypeError：无法读取属性＆＃39;匹配＆＃39;未定义的

我不知道我的错误是什么？列数据与格式函数中的表头匹配！

HTML：

tweenmax.set

和java脚本：

        <div class="panel-body">
        <table class="table table-striped table-bordered table-hover" id="datatable_sample">
            <thead>
                <tr>
                    <th></th>
                    <th><%=Resources.@default.aspx.lblID%></th>
                    <th><%=Resources.@default.aspx.lblUserName%></th>
                    <th><%=Resources.@default.aspx.lblDate%></th>
                    <th><%=Resources.@default.aspx.lblName%></th>
                    <th><%=Resources.@default.aspx.lblLastName%></th>
                    <th><%=Resources.@default.aspx.lblEmail%></th>
                    <th><%=Resources.@default.aspx.lblMobileNumber%></th>
                    <th><%=Resources.@default.aspx.lblPhoneNumber%></th>
                    <th><%=Resources.@default.aspx.lblTotalPrice%></th>
                    <th><%=Resources.@default.aspx.paymentStatus%></th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

C＃：

   <script src="assets/plugins/bootstrap.toggle/js/bootstrap-toggle.min.js"></script>
<script type="text/javascript">
    function loadOrderDataTable() {
        if (jQuery().dataTable) {
            var table = jQuery('#datatable_sample');
            table.dataTable({
                "columns": [{
                    "orderable": false
                }, {
                    "orderable": true
                }, {
                    "orderable": true
                }, {
                    "orderable": true
                }, {
                    "orderable": true
                }, {
                    "orderable": true
                }, {
                    "orderable": true
                }, {
                    "orderable": true
                }, {
                    "orderable": true
                }, {
                    "orderable": true
                }, {
                    "orderable": true
                }],

                "bLengthChange": false,
                // set the initial value
                "pageLength": 5,
                "pagingType": "bootstrap_full_number",
                "language": {
                    "lengthMenu": "  _MENU_ records",
                    "paginate": {
                        "previous": "Prev",
                        "next": "Next",
                        "last": "Last",
                        "first": "First"
                    }
                },
                "columnDefs": [{  // set default column settings
                    'orderable': true,
                    'targets': [3]
                }, {
                    "searchable": true,
                    "targets": [3]
                }],
                "order": [
                    [3, "desc"]
                ] // set first column as a default sort by asc
                    ,
                "sAjaxSource": "services/UsersWSRV.asmx/GetOrders",
                "fnServerParams": function (aoData) {
                    aoData.push({ "name": "intervals", "value": "intervals" });
                },
                "aoColumns": [
                    {
                        "mData": null,
                        "className": 'details-control',
                        "orderable": false,
                        "defaultContent": ''
                    },
                    { "mData": "id" },
                    { "mData": "user_name" },
                    { "mData": "order_time" },
                    { "mData": "name" },
                    { "mData": "last_name" },
                    { "mData": "email" },
                    { "mData": "mobile_number" },
                    { "mData": "phone_number" },
                    {
                        "mData": "payment_cost",
                        "mRender": function (val) {
                            return val + "€";
                        }
                    },
                    { "mData": "payment_status" }
                ],
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "contentType": "application/json; charset=utf-8",
                        "type": "GET",
                        "url": sSource,
                        "data": aoData,
                        "success":
                                function (msg) {
                                    var json = jQuery.parseJSON(msg.d);
                                    json.aaData = json;
                                    fnCallback(json);
                                    $("#datatable_sample").show();
                                }
                    });
                },
                "oLanguage": {
                    "sSearch": "<%=Resources.@default.aspx.lblSearch%>",
                    "sZeroRecords": "<%=Resources.@default.aspx.msgNoRecords%>",
                    "sLoadingRecords": "<%=Resources.@default.aspx.msgLoading%>",
                    "sLengthMenu": "<%=Resources.@default.aspx.dtRecord%>",
                    "sInfo": "<%=Resources.StringResource1.lblShowing%> _START_ <%=Resources.StringResource1.lblTo%> _END_ <%=Resources.StringResource1.lblOf%> _TOTAL_ <%=Resources.StringResource1.lblItems%>",
                    "oPaginate": {
                        "sFirst": "<%=Resources.StringResource1.lblFirst%>",
                        "sLast": "<%=Resources.StringResource1.lblLast%>",
                        "sNext": "<%=Resources.StringResource1.lblNext%>",
                        "sPrevious": "<%=Resources.StringResource1.lblPrevious%>"
                    }
                }
            });
            var tableWrapper = jQuery('#datatable_sample_wrapper');
        }
    }

    function loadOrderDetailDataTable(oid) {
        if (jQuery().dataTable) {
            var table = jQuery('#detail_datatable');
            table.dataTable({
                "searching": false,
                "bPaginate": false,
                "info": false,
                "columns": [{
                    "orderable": false
                }, {
                    "orderable": true
                }, {
                    "orderable": true
                }, {
                    "orderable": true
                }, {
                    "orderable": true
                }, {
                    "orderable": true
                }],

                "bLengthChange": false,
                // set the initial value
                "pageLength": 100,
                "pagingType": "bootstrap_full_number",
                "language": {
                    "lengthMenu": "  _MENU_ records",
                    "paginate": {
                        "previous": "Prev",
                        "next": "Next",
                        "last": "Last",
                        "first": "First"
                    }
                },
                "columnDefs": [{  // set default column settings
                    'orderable': true,
                    'targets': [1]
                }, {
                    "searchable": true,
                    "targets": [1]
                }],
                "order": [
                    [1, "asc"]
                ] // set second column as a default sort by asc
                    ,
                "sAjaxSource": "services/UsersWSRV.asmx/GetOrderDetails",
                "fnServerParams": function (aoData) {
                    aoData.push({ "oid": oid});
                },
                "aoColumns": [
                    {
                        "mData": "thumbnail_file_name",
                        "orderable": false,
                        "mRender": function (val) {
                            return "<img height='42' width='42' src=" + val + "/>";
                        }
                    },
                    {
                        "mData": "price",
                        "mRender": function (val) {
                            return val + "€";
                        }
                    },
                    {
                        "mData": "discount",
                        "mRender": function (val) {
                            return val + "€";
                        }
                    },
                    {
                        "mData": "final_price",
                        "mRender": function (val) {
                            return val + "€";
                        }
                    },
                    { "mData": "status" },
                    { "mData": "description" }
                ],
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "contentType": "application/json; charset=utf-8",
                        "type": "POST",
                        "url": sSource,
                        "data": JSON.stringify({ oid: oid }),
                        "processData": false,
                        "success":
                                function (msg) {
                                    var json = jQuery.parseJSON(msg.d);
                                    json.aaData = json;
                                    fnCallback(json);
                                    $("#detail_datatable").show();
                                }
                    });
                },
                "oLanguage": {
                    "sSearch": "<%=Resources.@default.aspx.lblSearch%>",
                    "sZeroRecords": "<%=Resources.@default.aspx.msgNoRecords%>",
                    "sLoadingRecords": "<%=Resources.@default.aspx.msgLoading%>",
                    "sLengthMenu": "<%=Resources.@default.aspx.dtRecord%>",
                    "sInfo": "<%=Resources.StringResource1.lblShowing%> _START_ <%=Resources.StringResource1.lblTo%> _END_ <%=Resources.StringResource1.lblOf%> _TOTAL_ <%=Resources.StringResource1.lblItems%>",
                    "oPaginate": {
                        "sFirst": "<%=Resources.StringResource1.lblFirst%>",
                        "sLast": "<%=Resources.StringResource1.lblLast%>",
                        "sNext": "<%=Resources.StringResource1.lblNext%>",
                        "sPrevious": "<%=Resources.StringResource1.lblPrevious%>"
                    }
                }
            });
            var tableWrapper = jQuery('#datatable_sample_wrapper');
        }
    }

    /* Formatting function for row details - modify as you need */
    function format(d) {
        // `d` is the original data object for the row
        return '<div class="panel-body"><table class="table table-striped table-bordered table-hover" id="detail_datatable">' +
                    '<thead>' +
                          '<tr>' +
                               '<th>Image</th>' +
                               '<th>Price</th>' +
                               '<th>Discount</th>' +
                               '<th>Final Price</th>' +
                               '<th>Status</th>' +
                               '<th>Description</th>' +
                          '</tr>' +
                    '</thead>' +
                    '<tbody>' +
                    '</tbody>' +
                '</table></div>';
    }

    $('#datatable_sample tbody').on('click', 'td.details-control', function () {

        var table = jQuery('#datatable_sample').DataTable();
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data())).show();
            tr.addClass('shown');
            loadOrderDetailDataTable(1);
        }
    } );
</script>
<script type="text/javascript">
    loadScript(plugin_path + "datatables/js/jquery.dataTables.min.js", function () {
        loadScript(plugin_path + "datatables/js/dataTables.tableTools.min.js", function () {
            loadScript(plugin_path + "datatables/js/dataTables.colReorder.min.js", function () {
                loadScript(plugin_path + "datatables/js/dataTables.scroller.min.js", function () {
                    loadScript(plugin_path + "datatables/dataTables.bootstrap.js", function () {
                        loadScript(plugin_path + "select2/js/select2.full.min.js", function () {
                            loadOrderDataTable();
                        });
                    });
                });
            });
        });
    });
</script>

主数据表（datatable_sample）运行良好但是当我点击展开按钮时，网页浏览器会出错，请看下面的图片：

enter image description here

0 个答案:

没有答案
相关问题
最新问题