Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Commit cc94151

Browse files
l-linl-lin
committed
Integration with scroller plugin #67 
1 parent 5038a74 commit cc94151

File tree

362 files changed

+1575
-82543
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

362 files changed

+1575
-82543
lines changed

‎demo/app.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,13 @@
129129
$rootScope.$broadcast('event:changeView', 'withResponsive');
130130
}
131131
})
132+
.state('withScroller', {
133+
url: '/withScroller',
134+
templateUrl: 'demo/partials/with_scroller.html',
135+
controller: function($rootScope) {
136+
$rootScope.$broadcast('event:changeView', 'withScroller');
137+
}
138+
})
132139
.state('bootstrapIntegration', {
133140
url: '/bootstrapIntegration',
134141
templateUrl: 'demo/partials/bootstrap_integration.html',

‎demo/partials/api_options_builder.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -624,5 +624,31 @@ <h3><code>DTOptionsBuilder</code></h3>
624624
</p>
625625
</td>
626626
</tr>
627+
<tr>
628+
<td><code>DTOptions</code></td>
629+
<td><code>withScroller()</code></td>
630+
<td>
631+
<p>Add <a href="http://datatables.net/extensions/scroller/">Scroller</a> compatibility.</p>
632+
<div hljs language="js">
633+
angular.module('myModule', ['datatables'])
634+
.controller('myCtrl', function ($scope, DTOptionsBuilder) {
635+
$scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
636+
.withScroller();
637+
});
638+
</div>
639+
<p>
640+
The above code will construct the following DataTables options:
641+
</p>
642+
<div hljs language="json">
643+
{
644+
"sAjaxSource": "data.json",
645+
"sDom": "lfrtipS"
646+
}
647+
</div>
648+
<p class="text-info">
649+
<i class="fa fa-info-circle"></i>&nbsp;By calling this API, the letter <code>S</code> is appended to the <a href="http://datatables.net/examples/basic_init/dom.html">DOM positioning</a>.
650+
</p>
651+
</td>
652+
</tr>
627653
</tbody>
628654
</table>

‎demo/partials/bootstrap_integration.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,13 @@ <h1><i class="fa fa-play"></i>&nbsp;Bootstrap integration</h1>
1818
</tab>
1919
<tab heading="HTML">
2020
<div hljs>
21+
<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
22+
<!-- ... -->
2123
<div ng-controller="bootstrapIntegrationCtrl">
2224
<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered"></table>
2325
</div>
26+
<!-- ... -->
27+
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
2428
</div>
2529
</tab>
2630
<tab heading="JS">

‎demo/partials/override_bootstrap_options.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,13 @@ <h1><i class="fa fa-play"></i>&nbsp;Override Bootstrap options</h1>
2323
</tab>
2424
<tab heading="HTML">
2525
<div hljs>
26-
<div ng-controller="bootstrapIntegrationCtrl">
26+
<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
27+
<!-- ... -->
28+
<div ng-controller="withBootstrapOptionsCtrl">
2729
<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered"></table>
2830
</div>
31+
<!-- ... -->
32+
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
2933
</div>
3034
</tab>
3135
<tab heading="JS">

‎demo/partials/sidebar.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,11 @@
8585
<i class="menu-icon fa fa-caret-right"></i>&nbsp;With Responsive
8686
</a>
8787
</li>
88+
<li ng-class="{'active': isActive('withScroller')}">
89+
<a ui-sref="withScroller">
90+
<i class="menu-icon fa fa-caret-right"></i>&nbsp;With Scroller
91+
</a>
92+
</li>
8893
<li ng-class="{'active': isActive('bootstrapIntegration')}">
8994
<a ui-sref="bootstrapIntegration">
9095
<i class="menu-icon fa fa-caret-right"></i>&nbsp;Bootstrap integration

‎demo/partials/with_col_reorder.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,13 @@ <h1><i class="fa fa-play"></i>&nbsp;With the DataTables <a href="https://datatab
2121
</tab>
2222
<tab heading="HTML">
2323
<div hljs>
24+
<link rel="stylesheet" href="vendor/datatables-colreorder/css/dataTables.colReorder.css">
25+
<!-- ... -->
2426
<div ng-controller="withColReorderCtrl">
2527
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
2628
</div>
29+
<!-- ... -->
30+
<script src="vendor/datatables-colreorder/js/dataTables.colReorder.js"></script>
2731
</div>
2832
</tab>
2933
<tab heading="JS">

‎demo/partials/with_col_vis.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,13 @@ <h1><i class="fa fa-play"></i>&nbsp;With the DataTables <a href="https://datatab
2121
</tab>
2222
<tab heading="HTML">
2323
<div hljs>
24+
<link rel="stylesheet" href="vendor/datatables-colvis/css/dataTables.colVis.css">
25+
<!-- ... -->
2426
<div ng-controller="withColVisCtrl">
2527
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
2628
</div>
29+
<!-- ... -->
30+
<script src="vendor/datatables-colvis/js/dataTables.colVis.js"></script>
2731
</div>
2832
</tab>
2933
<tab heading="JS">

‎demo/partials/with_responsive.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,13 @@ <h1><i class="fa fa-play"></i>&nbsp;With the DataTables <a href="https://datatab
2222
</tab>
2323
<tab heading="HTML">
2424
<div hljs>
25+
<link rel="stylesheet" href="vendor/datatables-responsive/css/dataTables.responsive.css">
26+
<!-- ... -->
2527
<div ng-controller="withResponsiveCtrl">
2628
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
2729
</div>
30+
<!-- ... -->
31+
<script src="vendor/datatables-responsive/js/dataTables.responsive.js"></script>
2832
</div>
2933
</tab>
3034
<tab heading="JS">

‎demo/partials/with_scroller.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<article class="main-content">
2+
<header class="article-header">
3+
<h1><i class="fa fa-play"></i>&nbsp;With the DataTables <a href="http://datatables.net/extensions/scroller/">Scroller</a></h1>
4+
</header>
5+
<section class="article-content">
6+
<p>
7+
The <code>angular-datatables</code> also provides an API in order to make the plugin <code>Scroller</code> works with datatables.
8+
</p>
9+
<p>
10+
See the <a ui-sref="api">API</a> for the complete list of methods of the helper.
11+
</p>
12+
</section>
13+
<section class="showcase">
14+
<tabset>
15+
<tab heading="Preview">
16+
<article class="preview">
17+
<div ng-controller="withScrollerCtrl">
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+
<link rel="stylesheet" href="vendor/datatables-scroller/css/dataTables.scroller.css">
25+
<!-- ... -->
26+
<div ng-controller="withScrollerCtrl">
27+
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
28+
</div>
29+
<!-- ... -->
30+
<script src="vendor/datatables-scroller/js/dataTables.scroller.js"></script>
31+
</div>
32+
</tab>
33+
<tab heading="JS">
34+
<div hljs language="js">
35+
angular.module('datatablesSampleApp', ['datatables'])
36+
.controller('withScrollerCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
37+
$scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
38+
.withScroller()
39+
.withOption('deferRender', true)
40+
// Do not forget to add the scorllY option!!!
41+
.withOption('scrollY', 200);
42+
$scope.dtColumns = [
43+
DTColumnBuilder.newColumn('id').withTitle('ID'),
44+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
45+
DTColumnBuilder.newColumn('lastName').withTitle('Last name')
46+
];
47+
});
48+
</div>
49+
</tab>
50+
</tabset>
51+
</section>
52+
</article>

‎demo/partials/with_table_tools.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,13 @@ <h1><i class="fa fa-play"></i>&nbsp;With the DataTables <a href="https://datatab
2121
</tab>
2222
<tab heading="HTML">
2323
<div hljs>
24+
<link rel="stylesheet" href="vendor/datatables-tabletools/css/dataTables.tableTools.css">
25+
<!-- ... -->
2426
<div ng-controller="withTableToolsCtrl">
2527
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
2628
</div>
29+
<!-- ... -->
30+
<script src="vendor/datatables-tabletools/js/dataTables.tableTools.js"></script>
2731
</div>
2832
</tab>
2933
<tab heading="JS">

0 commit comments

Comments
 (0)