Skip to content

Commit bda308b

Browse files
l-linl-lin
committed
Add row click event example
1 parent 72d64c2 commit bda308b

File tree

5 files changed

+104
-1
lines changed

5 files changed

+104
-1
lines changed

‎demo/app.js

+7
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,13 @@
122122
$rootScope.$broadcast('event:changeView', 'allInOne');
123123
}
124124
})
125+
.state('rowClickEvent', {
126+
url: '/rowClickEvent',
127+
templateUrl: 'demo/partials/row_click_event.html',
128+
controller: function($rootScope) {
129+
$rootScope.$broadcast('event:changeView', 'rowClickEvent');
130+
}
131+
})
125132
.state('api', {
126133
url: '/api',
127134
templateUrl: 'demo/partials/api.html',

‎demo/partials/row_click_event.html

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<article class="main-content">
2+
<header class="article-header">
3+
<h1><i class="fa fa-play"></i>&nbsp;Row click event</h1>
4+
</header>
5+
<section class="article-content">
6+
<p>
7+
Simple example to bind a click event on each row of the DataTable with the help of <a href="http://datatables.net/reference/option/rowCallback">rowCallback</a>.
8+
</p>
9+
</section>
10+
<section class="showcase">
11+
<tabset>
12+
<tab heading="Preview">
13+
<article class="preview">
14+
<div ng-controller="rowClickEventCtrl">
15+
<blockquote>Please click on a row</blockquote>
16+
<p class="text-danger">You clicked on: <strong>{{ message }}</strong></p>
17+
<br />
18+
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
19+
</div>
20+
</article>
21+
</tab>
22+
<tab heading="HTML">
23+
<div hljs>
24+
<div ng-controller="rowClickEventCtrl">
25+
<blockquote>Please click on a row</blockquote>
26+
<p class="text-danger">You clicked on: <strong>{{ message }}</strong></p>
27+
<br />
28+
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
29+
</div>
30+
</div>
31+
</tab>
32+
<tab heading="JS">
33+
<div hljs language="js">
34+
angular.module('datatablesSampleApp').
35+
controller('rowClickEventCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
36+
$scope.message = '';
37+
$scope.someClickHandler = function(info) {
38+
$scope.message = info.id + ' - ' + info.firstName;
39+
};
40+
41+
$scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
42+
.withPaginationType('full_numbers')
43+
.withOption('rowCallback', function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
44+
$('td', nRow).bind('click', function() {
45+
$scope.$apply(function() {
46+
$scope.someClickHandler(aData);
47+
});
48+
});
49+
return nRow;
50+
});
51+
$scope.dtColumns = [
52+
DTColumnBuilder.newColumn('id').withTitle('ID'),
53+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
54+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
55+
];
56+
});
57+
</div>
58+
</tab>
59+
</tabset>
60+
</section>
61+
</article>

‎demo/partials/sidebar.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
</a>
7272
</li>
7373
<li ng-class="{'active': isActive('withTableTools')}">
74-
<a ui-sref="withTableTools">
74+
<a ui-sref="withTableToo ls">
7575
<i class="menu-icon fa fa-caret-right"></i>&nbsp;With TableTools
7676
</a>
7777
</li>
@@ -85,6 +85,11 @@
8585
<i class="menu-icon fa fa-caret-right"></i>&nbsp;All in one
8686
</a>
8787
</li>
88+
<li ng-class="{'active': isActive('rowClickEvent')}">
89+
<a ui-sref="rowClickEvent">
90+
<i class="menu-icon fa fa-caret-right"></i>&nbsp;Row click event
91+
</a>
92+
</li>
8893
</ul>
8994
</li>
9095
<li ng-class="{'active': isActive('api')}">

‎demo/rowClickEvent.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* @author l.lin
3+
* @created 17/07/14 16:45
4+
*/
5+
(function() {
6+
'use strict';
7+
angular.module('datatablesSampleApp').controller('rowClickEventCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
8+
$scope.message = '';
9+
$scope.someClickHandler = function(info) {
10+
$scope.message = info.id + ' - ' + info.firstName;
11+
};
12+
13+
$scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
14+
.withPaginationType('full_numbers')
15+
.withOption('rowCallback', function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
16+
$('td', nRow).bind('click', function() {
17+
$scope.$apply(function() {
18+
$scope.someClickHandler(aData);
19+
});
20+
});
21+
return nRow;
22+
});
23+
$scope.dtColumns = [
24+
DTColumnBuilder.newColumn('id').withTitle('ID'),
25+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
26+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
27+
];
28+
});
29+
})();

‎index.html

+1
Original file line numberDiff line numberDiff line change
@@ -83,5 +83,6 @@ <h1><a href="https://github.com/l-lin/angular-datatables">angular-datatables</a>
8383
<script src="demo/withTableTools.js"></script>
8484
<script src="demo/bootstrapIntegration.js"></script>
8585
<script src="demo/allInOne.js"></script>
86+
<script src="demo/rowClickEvent.js"></script>
8687
</body>
8788
</html>

0 commit comments

Comments
 (0)