Skip to content

Instantly share code, notes, and snippets.

@douglascayers
Last active November 23, 2016 02:14
Show Gist options
  • Save douglascayers/bbb2dda43a959562b03438352722773d to your computer and use it in GitHub Desktop.
Save douglascayers/bbb2dda43a959562b03438352722773d to your computer and use it in GitHub Desktop.
Lightning Component that reproduces "Failed to construct 'Option'" error with jQuery 2.2.4 or 3.1.1 and DataTables 1.10.12
<aura:application extends="force:slds">
<ltng:require scripts="{!join(',',
$Resource.jquery_3_1_1_js,
$Resource.DataTables + '/DataTables-1.10.12/js/jquery.dataTables.min.js')}"
styles="{!$Resource.DataTables + '/DataTables-1.10.12/css/jquery.dataTables.min.css'}"
afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
<table id="myDataTable"></table>
</aura:application>
({
afterScriptsLoaded : function(component, event, helper) {
var records = [
{ 'Name' : 'Albert', 'Age' : 20 },
{ 'Name' : 'Betty', 'Age' : 30 },
{ 'Name' : 'Carl', 'Age' : 40 },
];
jQuery('#myDataTable').DataTable({
data : records,
columns : [
{ data: 'Name', title: 'Name' },
{ data: 'Age', title: 'Age' }
]
});
}
})
@douglascayers
Copy link
Author

@douglascayers
Copy link
Author

douglascayers commented Nov 23, 2016

The problem seems isolated to the l length dom option which builds a select input with tags. Removing l from the dom property allows the table to render.

For example: jQuery('#myDataTable').DataTable({ dom: 'tifpr', ... });

https://datatables.net/reference/option/dom

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment