I am using jQuery datatable in my application and i am stuck with this issue now. I load the table from SQL DB, using C# code in backend. It loads/Adds/Deletes fine so far.
After selecting a row when i click on Edit Button, it shows me this error -
"Uncaught TypeError: adata.data(...)[0][columnDefs[j].name].indexOf is not a function at altEditor..."
JavaScript -
@section ScriptsBlock {
<script src=".../datagrid/datatables/datatables.bundle.js?2"></script>
<script src=".../datagrid/datatables/datatables.ajaxcalls.js"></script>
<script src=".../datagrid/datatables/datatables.export.js"></script>
<script>
$(document).ready(function () {
var columnSet = [
{
title: "ID",
id: "ID",
data: "id",
type: "text",
placeholderMsg: "Id from database",
"visible": false,
"searchable": false,
type: "readonly"
},
...
...
...
...
]
var myTable = $('#dt-basic-example').dataTable({
dom: "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'B>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
ajax: "/page?handler=pagehandler",
columns: columnSet,
select: 'single',
altEditor: true,
"pageLength": 50,
responsive: true,
buttons: [
{
extend: 'selected',
text: '<i class="fal fa-times mr-1"></i> Delete',
name: 'delete',
className: 'btn-primary btn-sm mr-1'
},
{
extend: 'selected',
text: '<i class="fal fa-edit mr-1"></i> Edit',
name: 'edit',
className: 'btn-primary btn-sm mr-1 cust-edit'
},
{
text: '<i class="fal fa-plus mr-1"></i> Add',
name: 'add',
className: 'btn-success btn-sm mr-1'
},
{
text: '<i class="fal fa-sync mr-1"></i> Refresh',
name: 'refresh',
className: 'btn-primary btn-sm'
}
],
onAddRow: function (dt, rowdata, success, error) {
var result = PostRow('page', 'Addhandler', rowdata, success, error);
success(JSON.stringify(rowdata));
error: error;
},
onEditRow: function (dt, rowdata, success, error) {
var result = PostRow('page', 'Edithandler', rowdata, success, error);
success(rowdata);
error: error;
},
onDeleteRow: function (dt, rowdata, success, error) {
var result = GetRow('page', 'DeleteHandler', { id: rowdata.id }, success, error);
success(rowdata);
error: error;
},
})
});
</script>
}
PostRow function
function PostRow(handler, method, rowdata, success, error) {
var data;
data = $.ajax({
url: '/' + handler + '?handler=' + method + '',
type: 'POST',
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="tokenName"]').val());
},
data: rowdata,
dataType: "text",
success: success,
error: error
});
return data;
}
After looking a few blogs , i tried changing the JQuery version , added JQuery-migrate-cdn but no luck. I am not really sure where to look for this error and understand it. Any lead/ suggestion is welcome.