javascript - 无法读取可编辑数据表中未定义错误的属性 'mData'

Question

我只想使用多 4 行的 jquery 可编辑数据表，但我看到此错误:无法读取未定义的属性“mData”。

如果我输入 4 <th>和 4 <td>数据表效果很好，但如果我放 5 个或更多 <th>和 <td>我得到无法读取未定义的属性“mData”

这是关于行数？因为 td 计数等于 tr 计数。

代码示例；

有效

<table class="table table-striped" id="datatable-editable">
   <thead>
      <tr>
         <th>Rendering engine</th>
         <th>Browser</th>
         <th>Platform(s)</th>
         <th>Actions</th>
      </tr>
   </thead>
   <tbody>
      <tr class="gradeX">
         <td>Trident</td>
         <td>Internet
            Explorer 4.0
         </td>
         <td>Win 95+</td>
         <td class="actions">
            <a href="#" class="hidden on-editing save-row"><i class="fa fa-save"></i></a>
            <a href="#" class="hidden on-editing cancel-row"><i class="fa fa-times"></i></a>
            <a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i></a>
            <a href="#" class="on-default remove-row"><i class="fa fa-trash-o"></i></a>
         </td>
         <td>dsa</td>
      </tr>
   </tbody>
</table>

不工作

<table class="table table-striped" id="datatable-editable">
   <thead>
      <tr>
         <th>Rendering engine</th>
         <th>Browser</th>
         <th>Platform(s)</th>
         <th>Actions</th>
         <th>**ExtraRow**</th>
      </tr>
   </thead>
   <tbody>
      <tr class="gradeX">
         <td>Trident</td>
         <td>Internet
            Explorer 4.0
         </td>
         <td>Win 95+</td>
         <td class="actions">
            <a href="#" class="hidden on-editing save-row"><i class="fa fa-save"></i></a>
            <a href="#" class="hidden on-editing cancel-row"><i class="fa fa-times"></i></a>
            <a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i></a>
            <a href="#" class="on-default remove-row"><i class="fa fa-trash-o"></i></a>
         </td>
         <td>**Extra TD**</td>
      </tr>
   </tbody>
</table>

JS:

(function( $ ) {

    'use strict';

    var EditableTable = {

        options: {
            addButton: '#addToTable',
            table: '#datatable-editable',
            dialog: {
                wrapper: '#dialog',
                cancelButton: '#dialogCancel',
                confirmButton: '#dialogConfirm',
            }
        },

        initialize: function() {
            this
                .setVars()
                .build()
                .events();
        },

        setVars: function() {
            this.$table             = $( this.options.table );
            this.$addButton         = $( this.options.addButton );

            // dialog
            this.dialog             = {};
            this.dialog.$wrapper    = $( this.options.dialog.wrapper );
            this.dialog.$cancel     = $( this.options.dialog.cancelButton );
            this.dialog.$confirm    = $( this.options.dialog.confirmButton );

            return this;
        },

        build: function() {
            this.datatable = this.$table.DataTable({
                "language": {
                    "decimal":        "",
                    "emptyTable":     "No data available in table",
                    "info":           "Showing _START_ to _END_ of _TOTAL_ entries",
                    "infoEmpty":      "Showing 0 to 0 of 0 entries",
                    "infoFiltered":   "(filtered from _MAX_ total entries)",
                    "infoPostFix":    "",
                    "thousands":      ",",
                    "lengthMenu":     "Show _MENU_ entries",
                    "loadingRecords": "Loading...",
                    "processing":     "Processing...",
                    "search":         "Search:",
                    "zeroRecords":    "No matching records found",
                    "paginate": {
                        "first":      "First",
                        "last":       "Last",
                        "next":       "Next",
                        "previous":   "Previous"
                    },
                },
                aoColumns: [
                    null,
                    null,
                    null,
                    { "bSortable": false }
                ]
            });

            window.dt = this.datatable;

            return this;
        },


        events: function() {
            var _self = this;

            this.$table
                .on('click', 'a.save-row', function( e ) {
                    e.preventDefault();

                    _self.rowSave( $(this).closest( 'tr' ) );
                })
                .on('click', 'a.cancel-row', function( e ) {
                    e.preventDefault();

                    _self.rowCancel( $(this).closest( 'tr' ) );
                })
                .on('click', 'a.edit-row', function( e ) {
                    e.preventDefault();

                    _self.rowEdit( $(this).closest( 'tr' ) );
                })
                .on( 'click', 'a.remove-row', function( e ) {
                    e.preventDefault();

                    var $row = $(this).closest( 'tr' );

                    $.magnificPopup.open({
                        items: {
                            src: _self.options.dialog.wrapper,
                            type: 'inline'
                        },
                        preloader: false,
                        modal: true,
                        callbacks: {
                            change: function() {
                                _self.dialog.$confirm.on( 'click', function( e ) {
                                    e.preventDefault();

                                    _self.rowRemove( $row );
                                    $.magnificPopup.close();
                                });
                            },
                            close: function() {
                                _self.dialog.$confirm.off( 'click' );
                            }
                        }
                    });
                });

            this.$addButton.on( 'click', function(e) {
                e.preventDefault();

                _self.rowAdd();
            });

            this.dialog.$cancel.on( 'click', function( e ) {
                e.preventDefault();
                $.magnificPopup.close();
            });

            return this;
        },

        // ==========================================================================================
        // ROW FUNCTIONS
        // ==========================================================================================
        rowAdd: function() {
            this.$addButton.attr({ 'disabled': 'disabled' });

            var actions,
                data,
                $row;

            actions = [
                '<a href="#" onclick="SaveItem();" class="hidden on-editing save-row"><i class="fa fa-save"></i></a>',
                '<a href="#" class="hidden on-editing cancel-row"><i class="fa fa-times"></i></a>',
                '<a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i></a>',
                '<a href="#" onclick="RemoveItem();" class="on-default remove-row"><i class="fa fa-trash-o"></i></a>'
            ].join(' ');

            data = this.datatable.row.add([ '', '', '', actions ]);
            $row = this.datatable.row( data[0] ).nodes().to$();

            $row
                .addClass( 'adding' )
                .find( 'td:last' )
                .addClass( 'actions' );

            this.rowEdit( $row );

            this.datatable.order([0,'asc']).draw(); // always show fields
        },

        rowCancel: function( $row ) {
            var _self = this,
                $actions,
                i,
                data;

            if ( $row.hasClass('adding') ) {
                this.rowRemove( $row );
            } else {

                data = this.datatable.row( $row.get(0) ).data();
                this.datatable.row( $row.get(0) ).data( data );

                $actions = $row.find('td.actions');
                if ( $actions.get(0) ) {
                    this.rowSetActionsDefault( $row );
                }

                this.datatable.draw();
            }
        },

        rowEdit: function( $row ) {
            var _self = this,
                data;

            data = this.datatable.row( $row.get(0) ).data();

            $row.children( 'td' ).each(function( i ) {
                var $this = $( this );

                if ( $this.hasClass('actions') ) {
                    _self.rowSetActionsEditing( $row );
                } else {
                    $this.html( '<input type="text" class="form-control input-block" value="' + data[i] + '"/>' );
                }
            });
        },

        rowSave: function( $row ) {
            var _self     = this,
                $actions,
                values    = [];

            if ( $row.hasClass( 'adding' ) ) {
                this.$addButton.removeAttr( 'disabled' );
                $row.removeClass( 'adding' );
            }

            values = $row.find('td').map(function() {
                var $this = $(this);

                if ( $this.hasClass('actions') ) {
                    _self.rowSetActionsDefault( $row );
                    return _self.datatable.cell( this ).data();
                } else {
                    return $.trim( $this.find('input').val() );
                }
            });

            this.datatable.row( $row.get(0) ).data( values );

            $actions = $row.find('td.actions');
            if ( $actions.get(0) ) {
                this.rowSetActionsDefault( $row );
            }

            this.datatable.draw();
        },

        rowRemove: function( $row ) {
            if ( $row.hasClass('adding') ) {
                this.$addButton.removeAttr( 'disabled' );
            }

            this.datatable.row( $row.get(0) ).remove().draw();
        },

        rowSetActionsEditing: function( $row ) {
            $row.find( '.on-editing' ).removeClass( 'hidden' );
            $row.find( '.on-default' ).addClass( 'hidden' );
        },

        rowSetActionsDefault: function( $row ) {
            $row.find( '.on-editing' ).addClass( 'hidden' );
            $row.find( '.on-default' ).removeClass( 'hidden' );
        }

    };

    $(function() {
        EditableTable.initialize();
    });

}).apply( this, [ jQuery ]);

Answer 1

我认为问题出在 aoColumns 字段。如前所述 HERE

aoColumns: If specified, then the length of this array must be equal to the number of columns in the original HTML table. Use 'null' where you wish to use only the default values and automatically detected options.

然后您将根据您拥有的 th/td 数量编辑此字段

...
aoColumns: [
    null,
    null,
    null,
    { "bSortable": false },
    null,
],
...