Cannot read property 'nTable' of undefined
Cannot read property 'nTable' of undefined
rompeplatos
Posts: 20Questions: 4Answers: 0
in Editor
Hello, I have this:
javascript
var editor
if ($.fn.DataTable.isDataTable( '#tablaMateriales' ) ) {
$('#tablaMateriales').dataTable().fnDestroy();
}
$('#tablaMateriales tfoot th').each( function () {
var title = $(this).text();
if(title!="Operaciones"){
$(this).html( '<input type="text" placeholder="Buscar '+title+'" />' );
}
});
editor = new $.fn.dataTable.Editor({
ajax: {
url: '../get.php',
type: 'POST',
success: function () {
$('#tablaMateriales').DataTable().ajax.reload();
},
},
table: "#tablaMateriales",
fields: [{
label: "Nombre:",
name: "material.nombre"
}],
i18n: {
create: {
button: "Crear",
title: "Crear grupo",
submit: "Crear"
},
edit: {
button: "Modificar",
title: "Modificar grupo",
submit: "Modificar"
},
remove: {
button: "Eliminar",
title: "Eliminar grupo",
submit: "Eliminar",
confirm: {
_: "¿Seguro que desea eliminar %d grupos?",
1: "¿Seguro que desea eliminar 1 grupo?"
}
},
error: {
system: "error message"
}
}
});
var table = $('#tablaMateriales').DataTable({
language: {
url: "vendor/datatables/Spanish.json",
buttons: {
print: 'Imprimir',
copy: 'Copiar'
}
},
dom: "<'row'<'col-md-3'l><'col-md-6'B><'col-md-3'f>>rtip",
processing: true,
stateSave: true,
responsive: true,
iDisplayLength: 10,
serverSide: true,
select: true,
fixedHeader: false,
ajax: {
url: '../get.php',
type: 'POST',
},
lengthMenu: [
[5, 10, 25, 50, 100, -1],
[5, 10, 25, 50, 100, "Todo"] // change per page values here
],
columns: [
{
data: "material.nombre"
}
],
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
],
initComplete:function(){
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that.search( this.value ).draw();
}
});
});
}
});
php
Editor::inst($this -> getDb(), 'material')
->debug(true)
->field(
Field::inst('material.nombre')
)
->process($_POST)
->json();
result php
{"data":[{"DT_RowId":"row_3","material":{"nombre":"raqueta de badminton"}},{"DT_RowId":"row_2","material":{"nombre":"raqueta de padel"}},{"DT_RowId":"row_4","material":{"nombre":"raqueta de playaa"}},{"DT_RowId":"row_1","material":{"nombre":"raqueta de tenisa"}}],"options":[],"files":[],"draw":1,"recordsTotal":"4","recordsFiltered":"4","debug":[{"query":"SELECT COUNT( `id` ) as `cnt` FROM `material` ","bindings":[]},{"query":"SELECT COUNT( `id` ) as `cnt` FROM `material` ","bindings":[]},{"query":"SELECT `id` as 'id', `material`.`nombre` as 'material.nombre' FROM `material` ORDER BY `material`.`nombre` asc LIMIT 10","bindings":[]}]}
html
<table class="display table table-striped table-hover table-bordered " width="100%" id="tablaMateriales">
<thead>
<tr>
<th>Nombre</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Nombre</th>
</tr>
</tfoot>
</table>
And whenever I add the editor option I get the following error (http://prntscr.com/ok9f1z):
datatables.js:79607 Uncaught TypeError: Cannot read property 'nTable' of undefined
at HTMLDocument.<anonymous> (datatables.js:79607)
at HTMLDocument.dispatch (jquery.js:2)
at HTMLDocument.y.handle (jquery.js:2)
I do not understand what can happen.
This discussion has been closed.
Answers
I don't immediately see an issue with any of the above information. Could you give me a link to the page so I can debug it please? Or create a test case using http://live.datatables.net .
Thanks,
Allan
Finally it is to have this extension activated in chrome https://chrome.google.com/webstore/detail/autofill/nlmmgnhgdeffjkdckmikfpnddkbbfkkk
I have deactivated it and everything works without errors.