I am trying use jQuery DataTable with Angular JS in ServiceNow application and it throws following error jQuery(...).DataTable is not a function. Created variable 'j' to avoid conflict between jQuery and AngularJS.
I used the setup I described above with the basic example from the dataTables.net site and it worked for me.
Client Controller:
function() {
var c = this;
$("#example").dataTable({
"aaData":[
["Sitepoint","http://sitepoint.com","Blog","2013-10-15 10:30:00"],
["Flippa","http://flippa.com","Marketplace","null"],
["99designs","http://99designs.com","Marketplace","null"],
["Learnable","http://learnable.com","Online courses","null"],
["Rubysource","http://rubysource.com","Blog","2013-01-10 12:00:00"]
],
"aoColumnDefs":[
{
"sTitle":"Site name",
"aTargets": [ "site_name" ]
},
{
"aTargets": [ 1 ],
"bSortable": false,
"mRender": function ( url, type, full ) {
return '<a href="'+url+'">' + url + '</a>';
}
},
{
"aTargets":[ 3 ],
"sType": "date",
"mRender": function(date, type, full) {
return (full[2] == "Blog") ? new Date(date).toDateString(): "N/A" ;
}
}
]
});
}
HTML :
<div>
<table id="example">
<thead>
<tr><th class="site_name">Name</th><th>Url </th><th>Type</th><th>Last modified</th></tr>
</thead>
<tbody>
<tr><td>SitePoint</td></tr>
<tr><td>Learnable</td></tr>
<tr><td>Flippa</td></tr>
</tbody>
</table>
</div>
I haven't used the dataTable library before but isn't the dataTables method supposed to load the data and not the ng-repeat?
So I modified my previous script to:
Client Controller:
function ($scope){
$('#example2').DataTable({
"aaData": c.data.table //coming from server script using glide record api
});
}
HTML:
<table id="example2" class="table table-striped">
<thead>
<tr>
<th class="site_name"># Number</th>
<th>Incident ID</th>
<th>Incident Status</th>
<th>Last modified</th>
</tr>
</thead>
</table>
(adding just the headings like in your example)
and I get:
Then modified my script again with to add a bit more functionality:
$('#example2').DataTable({
"aaData": c.data.table, //coming from server script
"aoColumnDefs":[
{
"aTargets": [ 0 ],
"mRender": function ( data, type, full ) {
return '<a href="sp?id=ticket&table=incident&sys_id='+full[1]+'">' + data + '</a>';
}
},
]
});
Functionality in action: https://screencast.com/t/LadWZlq21v
It's a nice little library to quickly add a table.
