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

Commit ebf3d7b

Browse files
l-linl-lin
committed
Add responsive doc + Remove allInOne doc
1 parent 1dd2a3d commit ebf3d7b

File tree

260 files changed

+2579
-34913
lines changed

Some content is hidden

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

260 files changed

+2579
-34913
lines changed

‎demo/allInOne.js

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎demo/app.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,13 @@
122122
$rootScope.$broadcast('event:changeView', 'withTableTools');
123123
}
124124
})
125+
.state('withResponsive', {
126+
url: '/withResponsive',
127+
templateUrl: 'demo/partials/with_responsive.html',
128+
controller: function($rootScope) {
129+
$rootScope.$broadcast('event:changeView', 'withResponsive');
130+
}
131+
})
125132
.state('bootstrapIntegration', {
126133
url: '/bootstrapIntegration',
127134
templateUrl: 'demo/partials/bootstrap_integration.html',
@@ -136,13 +143,6 @@
136143
$rootScope.$broadcast('event:changeView', 'overrideBootstrapOptions');
137144
}
138145
})
139-
.state('allInOne', {
140-
url: '/allInOne',
141-
templateUrl: 'demo/partials/all_in_one.html',
142-
controller: function($rootScope) {
143-
$rootScope.$broadcast('event:changeView', 'allInOne');
144-
}
145-
})
146146
.state('rowClickEvent', {
147147
url: '/rowClickEvent',
148148
templateUrl: 'demo/partials/row_click_event.html',

‎demo/partials/all_in_one.html

Lines changed: 0 additions & 82 deletions
This file was deleted.

‎demo/partials/sidebar.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,11 @@
8080
<i class="menu-icon fa fa-caret-right"></i>&nbsp;With TableTools
8181
</a>
8282
</li>
83+
<li ng-class="{'active': isActive('withResponsive')}">
84+
<a ui-sref="withResponsive">
85+
<i class="menu-icon fa fa-caret-right"></i>&nbsp;With Responsive
86+
</a>
87+
</li>
8388
<li ng-class="{'active': isActive('bootstrapIntegration')}">
8489
<a ui-sref="bootstrapIntegration">
8590
<i class="menu-icon fa fa-caret-right"></i>&nbsp;Bootstrap integration
@@ -90,11 +95,6 @@
9095
<i class="menu-icon fa fa-caret-right"></i>&nbsp;Override Bootstrap options
9196
</a>
9297
</li>
93-
<li ng-class="{'active': isActive('allInOne')}">
94-
<a ui-sref="allInOne">
95-
<i class="menu-icon fa fa-caret-right"></i>&nbsp;All in one
96-
</a>
97-
</li>
9898
<li ng-class="{'active': isActive('rowClickEvent')}">
9999
<a ui-sref="rowClickEvent">
100100
<i class="menu-icon fa fa-caret-right"></i>&nbsp;Row click event

‎demo/partials/with_col_reorder.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<article class="main-content">
22
<header class="article-header">
3-
<h1><i class="fa fa-play"></i>&nbsp;With the datatables <a href="https://datatables.net/extras/colreorder/">ColReorder</a></h1>
3+
<h1><i class="fa fa-play"></i>&nbsp;With the DataTables <a href="https://datatables.net/extensions/colreorder/">ColReorder</a></h1>
44
</header>
55
<section class="article-content">
66
<p>

‎demo/partials/with_col_vis.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<article class="main-content">
22
<header class="article-header">
3-
<h1><i class="fa fa-play"></i>&nbsp;With the datatables <a href="https://datatables.net/extras/colvis/">ColVis</a></h1>
3+
<h1><i class="fa fa-play"></i>&nbsp;With the DataTables <a href="https://datatables.net/extensions/colvis/">ColVis</a></h1>
44
</header>
55
<section class="article-content">
66
<p>

‎demo/partials/with_responsive.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<article class="main-content">
2+
<header class="article-header">
3+
<h1><i class="fa fa-play"></i>&nbsp;With the DataTables <a href="https://datatables.net/extensions/responsive/">Responsive</a></h1>
4+
</header>
5+
<section class="article-content">
6+
<p>
7+
You can easily add the DataTables <code>Responsive</code> plugin.
8+
</p>
9+
<p class="alert alert-warning">
10+
<i class="fa fa-warning"></i>&nbsp;The API <code>DTColumn.notVisible()</code> does not work in this case. Use <code>DTColumn.withClass('none')</code> instead.
11+
</p>
12+
</section>
13+
<section class="showcase">
14+
<tabset>
15+
<tab heading="Preview">
16+
<article class="preview">
17+
<div ng-controller="withResponsiveCtrl">
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="withResponsiveCtrl">
25+
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
26+
</div>
27+
</div>
28+
</tab>
29+
<tab heading="JS">
30+
<div hljs language="js">
31+
angular.module('datatablesSampleApp', ['datatables']).controller('withResponsiveCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
32+
$scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
33+
.withPaginationType('full_numbers')
34+
// Active Responsive plugin
35+
.withOption('responsive', true);
36+
$scope.dtColumns = [
37+
DTColumnBuilder.newColumn('id').withTitle('ID'),
38+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
39+
// .notVisible() does not work in this case. Use .withClass('none') instead
40+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').withClass('none')
41+
];
42+
});
43+
</div>
44+
</tab>
45+
</tabset>
46+
</section>
47+
</article>

‎demo/partials/with_table_tools.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<article class="main-content">
22
<header class="article-header">
3-
<h1><i class="fa fa-play"></i>&nbsp;With the datatables <a href="https://datatables.net/extras/tabletools/">TableTools</a></h1>
3+
<h1><i class="fa fa-play"></i>&nbsp;With the DataTables <a href="https://datatables.net/extensions/tabletools/">TableTools</a></h1>
44
</header>
55
<section class="article-content">
66
<p>

‎demo/withResponsive.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/**
2+
* @author l.lin
3+
* @created 17/07/14 17:04
4+
*/
5+
(function() {
6+
'use strict';
7+
angular.module('datatablesSampleApp').controller('withResponsiveCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
8+
$scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
9+
.withPaginationType('full_numbers')
10+
// Active Responsive plugin
11+
.withOption('responsive', true);
12+
$scope.dtColumns = [
13+
DTColumnBuilder.newColumn('id').withTitle('ID'),
14+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
15+
// .notVisible() does not work in this case. Use .withClass('none') instead
16+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').withClass('none')
17+
];
18+
});
19+
})();

‎index.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<link rel="stylesheet" href="vendor/datatables-colreorder/css/dataTables.colReorder.css">
1919
<link rel="stylesheet" href="vendor/datatables-colvis/css/dataTables.colVis.css">
2020
<link rel="stylesheet" href="vendor/datatables-tabletools/css/dataTables.tableTools.css">
21+
<link rel="stylesheet" href="vendor/datatables-responsive/css/dataTables.responsive.css">
2122
<link rel="stylesheet" href="vendor/backtotop/backtotop.min.css">
2223
<link rel="stylesheet" href="vendor/highlightjs/styles/github.css">
2324
<link rel="stylesheet" href="dist/datatables.bootstrap.min.css">
@@ -65,6 +66,7 @@ <h1>
6566
<script src="vendor/datatables-colreorder/js/dataTables.colReorder.js"></script>
6667
<script src="vendor/datatables-colvis/js/dataTables.colVis.js"></script>
6768
<script src="vendor/datatables-tabletools/js/dataTables.tableTools.js"></script>
69+
<script src="vendor/datatables-responsive/js/dataTables.responsive.js"></script>
6870
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
6971
<script src="vendor/angular-bootstrap/ui-bootstrap.min.js"></script>
7072
<script src="vendor/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
@@ -93,9 +95,9 @@ <h1>
9395
<script src="demo/withColReorder.js"></script>
9496
<script src="demo/withColVis.js"></script>
9597
<script src="demo/withTableTools.js"></script>
98+
<script src="demo/withResponsive.js"></script>
9699
<script src="demo/bootstrapIntegration.js"></script>
97100
<script src="demo/overrideBootstrapOptions.js"></script>
98-
<script src="demo/allInOne.js"></script>
99101
<script src="demo/rowClickEvent.js"></script>
100102
</body>
101103
</html>

0 commit comments

Comments
 (0)