TypeError: $.fn.dataTable.Editor is not a constructor
TypeError: $.fn.dataTable.Editor is not a constructor
mldgato
Posts: 13Questions: 3Answers: 0
Hello, I know that there are other issues with this title but what I am trying basically is in this example: https://editor.datatables.net/examples/inline-editing/simple, but it does not work, I tell you what it is what I want to do:
Step 1: The user has a file in CSV he loads it and automatically when the file is loaded the information is loaded into a data table. (That works for me perfectly)
Step 2: If necessary, the user can change the information, to do this, click on the cell and change the information in that cell. (This does not work following the example I placed at the beginning and I get the message: TypeError: $ .fn.dataTable.Editor is not a constructor)
My code is as follows:
<form id="upload_csv" method="post" enctype="multipart/form-data">
<div class="col-md-4">
<input type="file" name="csv_file" id="csv_file" accept=".csv" class="form-control" required />
</div>
<div class="col-md-5">
<button type="submit" name="upload" id="upload" class="btn btn-info">Subir <i class="fa fa-upload" aria-hidden="true"></i></button>
</div>
</form>
<!--My table is placed inside the div-->
<div id="ContenedorTabla" class="table-responsive"></div>
<!--The scripts I use-->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
$('#upload_csv').on('submit', function(event)
{
event.preventDefault();
//Send via ajax the data loaded in the CSV file and php returns it in json
$.ajax(
{
url:"import.php",
method:"POST",
data:new FormData(this),
dataType:'json',
contentType:false,
cache:false,
processData:false,
success:function(jsonData)
{
//I create a random string to name the table
var result = '';
var length = 8;
var chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
//Insert the table into the div
$('#ContenedorTabla').html('<table class="table table-striped table-bordered" id="'+result+'"><thead><tr><th>CORRELATIVO</th><th>CARNE DEL ALUMNO</th><th>APELLIDOS DEL ALUMNO</th><th>NOMBRES DEL ALUMNO</th><th>GRADO-SECCION DEL ALUMNO</th><th>COLEGIATURA</th><th>INGLES Y COMPUTACION</th><th>MORA VENCIDA</th><th>OTROS PAGOS</th><th>MORA</th><th>FECHA</th><th>NOMBRE AGENCIA</th><th>EFECTIVO</th><th>CHEQUE BI</th><th>CHEQUE OB</th><th>CHEQUE BE</th><th>NO. CHQ. OB</th><th>NO. BOLETA</th><th>MONTO TOTAL</th><th>PAGO CON TC</th></tr></thead></table>');
$('#csv_file').val('');
//Here is the error
editor = new $.fn.dataTable.Editor(
{
ajax: "../php/staff.php",
table: "#"+result,
fields:
[
{
label: "CORRELATIVO:",
name: "CORRELATIVO"
},
{
label: "CARNE DEL ALUMNO:",
name: "CARNE_DEL_ALUMNO"
},
{
label: "APELLIDOS DEL ALUMNO:",
name: "APELLIDOS_DEL_ALUMNO"
},
{
label: "NOMBRES DEL ALUMNO:",
name: "NOMBRES_DEL_ALUMNO"
},
{
label: "GRADO-SECCION DEL ALUMNO:",
name: "GRADO-SECCION_DEL_ALUMNO"
},
{
label: "COLEGIATURA:",
name: "COLEGIATURA"
},
{
label: "INGLES Y COMPUTACION:",
name: "INGLES_Y_COMPUTACION"
},
{
label: "MORA VENCIDA:",
name: "MORA_VENCIDA"
},
{
label: "OTROS PAGOS:",
name: "OTROS_PAGOS"
},
{
label: "MORA:",
name: "MORA"
},
{
label: "FECHA:",
name: "FECHA"
},
{
label: "NOMBRE AGENCIA:",
name: "NOMBRE_AGENCIA"
},
{
label: "EFECTIVO:",
name: "EFECTIVO"
},
{
label: "CHEQUE BI:",
name: "CHEQUE_BI"
},
{
label: "CHEQUE OB:",
name: "CHEQUE_OB"
},
{
label: "CHEQUE BE:",
name: "CHEQUE_BE"
},
{
label: "NO CHQ OB:",
name: "NO_CHQ_OB"
},
{
label: "NO BOLETA:",
name: "NO_BOLETA"
},
{
label: "MONTO TOTAL:",
name: "MONTO_TOTAL"
},
{
label: "PAGO CON TC:",
name: "PAGO_CON_TC"
}
]
});
// Activate an inline edit on click of a table cell
$('#'+result).on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this );
} );
$('#'+result).DataTable(
{
"scrollX": true,
"language":
{
"url": "//cdn.datatables.net/plug-ins/1.10.12/i18n/Spanish.json"
},
data : jsonData,
columns :
[
{ data : "ORRELATIVO"},
{ data : "CARNE DEL ALUMNO"},
{ data : "APELLIDOS DEL ALUMNO"},
{ data : "NOMBRES DEL ALUMNO"},
{ data : "GRADO-SECCION DEL ALUMNO"},
{ data : "COLEGIATURA"},
{ data : "INGLES Y COMPUTACION"},
{ data : "MORA VENCIDA"},
{ data : "OTROS PAGOS"},
{ data : "MORA"},
{ data : "FECHA"},
{ data : "NOMBRE AGENCIA"},
{ data : "EFECTIVO"},
{ data : "CHEQUE BI"},
{ data : "CHEQUE OB"},
{ data : "CHEQUE BE"},
{ data : "NO CHQ OB"},
{ data : "NO BOLETA"},
{ data : "MONTO TOTAL"},
{ data : "PAGO CON TC"}
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
});
}
});
});
The final idea that the user after finishing modifying the data is to have one more button to store the information in the database, use datatables because it is very versatile to handle the data
Thank you very much for the support and the creators for allowing us to use this great tool.
This discussion has been closed.
Replies
You can't use the Editor like that.
You have to download the trial version and link to it locally.
Thank you, where can I get that version and if it's a trial where can I buy it, thanks.
You can go here https://editor.datatables.net/ for the link to download the trial version.
Kevin