Cannot extend unknown button type while using RequireJS with Combined Datatables.js and Editor.js
Cannot extend unknown button type while using RequireJS with Combined Datatables.js and Editor.js
TLDR;
I get Uncaught Cannot extend unknown button type: selected
when trying to use combined datatables file with a seperate editor.js file, all being managed by requirejs. I think it might be that requirejs is messing with adding the select extension. But i do not know how to fix this.
Problem:
I'm trying the trial version and i wanted to use the combined datatables js with the following included in it(copied from js file) with a seperate datatables.editor.js.
/*
* This combined file was created by the DataTables downloader builder:
* https://datatables.net/download
*
* To rebuild or modify this file with the latest versions of the included
* software please visit:
* https://datatables.net/download/#bs/dt-1.10.15/b-1.3.1/r-2.1.1/se-1.2.2
*
* Included libraries:
* DataTables 1.10.15, Buttons 1.3.1, Responsive 2.1.1, Select 1.2.2
*/
I'm tring a seperate editor file because I got error below when i tried to use the combined js file with editor in it
$.fn.dataTable.Editor is not a constructor
Here's my common.js for require.js
requirejs.config({
baseUrl: "/",
map: {
'*': {
'css': 'js/require-css.min', // or whatever the path to require-css is
'datatables.net': 'datatables-new'
}
},
paths: {
'css': 'js/require-css.min',
'jquery':"webjars/jquery/2.2.0/jquery.min",
'datatables-new': "js/datatables-a.min",
'datatables-editor': "vendor/editor-1.6.3/js/editor.bootstrap.min"
},
shim: {
"datatables-editor": {
deps: [ 'css!vendor/editor-1.6.3/css/editor.bootstrap.min',
"vendor/editor-1.6.3/js/dataTables.editor"
]
},
"datatables-new": {
deps: [ 'css!/css/datatables-a.min',
'jquery'
]
}
}
});
and here's my script
requirejs(['/js/common.js'], function (common) {
$(document).ready(function() {
require(['datatables-new','datatables-editor'], function(){
$.fn.dataTable.render.ellipsis = function(cutoff) {
return function(data, type, row) {
return type === 'display' && data.length > cutoff ? data.substr(0,
cutoff)
+ '...' : data;
}
};
editor = new $.fn.dataTable.Editor( {
ajax: {
create: {
type: 'POST',
url: '../php/rest/create.php'
},
edit: {
type: 'PUT',
url: '../php/rest/edit.php?id=_id_'
},
remove: {
type: 'DELETE',
url: '../php/rest/remove.php?id=_id_'
}
},
table: "#dishDataTables",
fields: [ {
label: "Name",
name: "name"
}, {
label: "Price",
name: "price"
}, {
label: "Description",
name: "description"
}, {
label: "Category",
name: "category"
}, {
label: "Status",
name: "status"
}
]
} );
$('#dishDataTables').DataTable({
paging : true,
columnDefs : [ {
targets : [ 3 ],
render : $.fn.dataTable.render.ellipsis(25)
} ],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
});
});
});
});
The links to ../php/rest/create.php, ../php/rest/edit.php and ../php/rest/remove.php are dummies, they don't work, But i've put them there just to test ui of editor.
I know that Uncaught Cannot extend unknown button type: selected
is because select is not being detected but i don't understand why this is happening as Select.js is inside the datatables.js.
If i remove this block from datables, everything works fine without buttons but i want the buttons.
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
The key part in require.js is below. I've added alias for datatables.net as it was required by datatables-editor. But I also think it messes loading the extension.(extension is inside "js/datatables-a.min"
).
map: {
'*': {
'datatables.net': 'datatables-new'
}
},
paths: {
'datatables-new': "js/datatables-a.min",
'datatables-editor': "vendor/editor-1.6.3/js/editor.bootstrap.min"
},
Any help is appreciated