我只想使用具有4行以上的jquery可编辑数据表，但是看到此错误：无法读取undefined的属性'mData'。
如果我放置4个<th>和4个<td>数据表工作良好，但是如果我放置5个或更多<th>和<td>则无法读取未定义的属性'mData'
这是关于行数？因为td count等于tr count。
代码实例;
作品
<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 ]);
最佳答案
我认为问题是由于aoColumns字段引起的。如所述HERE
aoColumns：如果指定，则此数组的长度必须相等
原始HTML表中的列数。在其中使用“ null”
您只想使用默认值并自动检测
选项。
然后，您将根据拥有的th / td的数量来编辑此字段
...
aoColumns: [
null,
null,
null,
{ "bSortable": false },
null,
],
...
关于javascript - 无法读取可编辑数据表中未定义错误的属性“mData”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49378259/