<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/coffee-script/1.3.3/coffee-script.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script type="text/coffeescript" src="app.coffee"></script>
</head>
<body ng-controller="MainCtrl">
<div style="width: 400px;">
<table id="myTable"></table>
</div>
</body>
</html>
app = angular.module('angularjs-starter', [])
app.controller 'MainCtrl', ($scope, $compile) ->
# ****************** BEGIN IMPORTANT CODE ******************
registerNewHtmlWithAngular = (html)->
linker = $compile html
element = linker $scope
# now what?
renderActionIcon = (cellValue)->
# cell value will be the ID of the user (1 or 2)
editLink = "<i class='icon-edit' ng-click='editUser(#{cellValue})'></i>"
deleteLink = "<i class='icon-trash' ng-click='deleteUser(#{cellValue})'></i>"
actionHtml = "#{editLink}#{deleteLink}"
registerNewHtmlWithAngular(actionHtml)
return actionHtml
# ****************** END IMPORTANT CODE ******************
$scope.deleteUser = (userId)->
console.log "Deleting user #{userId}"
$scope.editUser = (userId)->
console.log "Editing user #{userId}"
data = [
[1, 'Bob', 'Smith'],
[2, 'Jane', 'Smith']
]
vendServerData = (source, query, callback, settings)->
response =
aaData: data
iTotalRecords: data.length
iTotalDisplayRecords: data.length
callback (response)
options =
bSortClasses: false
bServerSide: true
bSort: false
fnServerData: vendServerData
aoColumns: [
{
"sTitle": ""
"mRender": renderActionIcon
},
{ "sTitle": "First Name" },
{ "sTitle": "Last Name" },
]
$('#myTable').dataTable(options)
angular.bootstrap(document, ['angularjs-starter'])
/* CSS goes here */