Skip to content

Commit 1fbb734

Browse files
l-linl-lin
committed
Merge pull request l-lin#9 from l-lin/dev
Dev
2 parents 801d6a3 + 574b246 commit 1fbb734

File tree

130 files changed

+13247
-1058
lines changed

Some content is hidden

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

130 files changed

+13247
-1058
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ node_modules
22
bin
33
.tmp
44
*.iml
5-
.zedstate
5+
.zedstate
6+
tags

‎.jshintrc

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@
2020
"smarttabs": true,
2121
"globals": {
2222
"angular": false,
23-
"after": false,
23+
"jQuery": false,
24+
"$": false,
25+
"DataTable": false,
26+
"after": false,
2427
"afterEach": false,
2528
"angular": false,
2629
"before": false,

‎Gruntfile.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ module.exports = function(grunt) {
1717
dist: 'dist',
1818
build: '.tmp',
1919
test: 'test',
20+
demo: 'demo',
21+
styles: 'styles',
2022
currentDir: path.resolve(__dirname),
2123
banner: '/*!\n' +
2224
' * <%= pkg.name %> - v<%= pkg.version %>\n' +
@@ -47,11 +49,12 @@ module.exports = function(grunt) {
4749

4850
grunt.registerTask('build', [
4951
'clean:dist',
50-
'ngtemplates',
5152
'concat:build',
5253
'ngmin',
54+
'cssmin',
5355
'uglify',
54-
'concat:banner'
56+
'concat:banner',
57+
'concat:bannerCSS'
5558
]);
5659

5760
grunt.registerTask('default', [

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
angular-datatables [![Build Status](https://travis-ci.org/l-lin/angular-datatables.png?branch=master)](https://travis-ci.org/l-lin/angular-datatables) [![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/)
22
================
3-
> Ajax oriented datatables for Angular.
3+
> Datatables for Angular.
44
5-
See [demo](https://l-lin.github.io/angular-datatables).
5+
See [github page](https://l-lin.github.io/angular-datatables).
66

77
License
88
================

‎bower.json

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-datatables",
3-
"version": "0.0.2",
3+
"version": "0.0.1",
44
"author": "l-lin",
55
"main": [
66
"dist/angular-datatables.js",
@@ -16,16 +16,28 @@
1616
"node_modules",
1717
"src",
1818
".travis.yml",
19-
"vendor"
19+
"vendor",
20+
"data.json",
21+
"demo",
22+
"favicon.png",
23+
"index.html",
24+
"README.md",
25+
"server",
26+
"styles",
27+
"_config.yml",
28+
"grunt"
2029
],
2130
"dependencies": {
2231
"angular": "1.2.6",
2332
"jquery": "1.11.0",
24-
"datatables": "~1.9.4"
33+
"datatables": "~1.9.4",
34+
"datatables-colvis": "~1.1.0",
35+
"datatables-colreorder": "~1.1.0",
36+
"datatables-tabletools": "~2.2.0"
2537
},
2638
"devDependencies": {
2739
"angular-mocks": "1.2.6",
2840
"bootstrap": "3.0.1",
2941
"angular-bootstrap": "0.10.0"
3042
}
31-
}
43+
}

‎demo/app.js

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
(function(angular) {
22
'use strict';
3-
angular.module('datatablesSampleApp', ['datatables', 'ui.bootstrap']).
4-
controller('sampleCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder) {
5-
$scope.dtOptions = DTOptionsBuilder.fromSource('data.json');
6-
$scope.dtColumns = [
7-
DTColumnBuilder.newColumn('id').withLabel('ID').withClass('text-danger'),
8-
DTColumnBuilder.newColumn('firstName').withLabel('First name'),
9-
DTColumnBuilder.newColumn('lastName').withLabel('Last name').setVisible(false)
10-
];
3+
angular.module('datatablesSampleApp', ['datatables']).
4+
controller('apiCtrl', function($scope, DTOptionsBuilder) {
5+
$scope.dtOptions = DTOptionsBuilder.newOptions()
6+
.withDisplayLength(10)
7+
.withColReorder()
8+
.withColVis()
9+
.withTableTools('vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf');
1110
});
1211
})(angular);

‎demo/partials/ajax.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<h3>Basic example - Ajax source</h3>
2+
<p>
3+
You can specify option along the <code>datatables</code> directive
4+
</p>
5+
<ul>
6+
<li><code>DTOptionsBuilder</code> provides a builder to build the options</li>
7+
<li><code>DTColumnBuilder</code> provides a builder to build a column to display</li>
8+
</ul>
9+
<iframe style="width: 100%; height: 400px; border: 1px solid #e5e5e5;" src="http://embed.plnkr.co/gyAmixA0pTfNt9F1L2Px/"></iframe>
10+

‎demo/partials/all_in_one.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<h3>All in one</h3>
2+
<p>
3+
Example with everything in da box!
4+
</p>
5+
<iframe style="width: 100%; height: 650px; border: 1px solid #e5e5e5;" src="http://embed.plnkr.co/Eh4n7TlW1l77obVxWFNT/preview"></iframe>

‎demo/partials/api.html

Lines changed: 196 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,197 @@
11
<h3>DTOptionsBuilder</h3>
2-
These are the methods that can be called to create a datatables options:
3-
<ul>
4-
<li><code>newOption()</code>: This will create a <code>DTOption</code>.
5-
<li><code>fromSource(sAjaxSource)</code>: This will create a <code>DTOption</code> with the given ajax source</li>.
6-
</ul>
7-
<h3>DTOptions</h3>
8-
These are the methods that can be called to customized the datatables options:
9-
<ul>
10-
<li><code>addSource(sAjaxSource)</code>: This will add the ajax source to the <code>DTOption</code>.</li>
11-
<li><code>addFnServerData(fn)</code>: This will customize the function to fetch the data. By default, it uses the angular <code>$http</code> in order to call the Ajax request.</li>
12-
<li><code>addDataProp(sDataProp)</code>: This will add a data property.</li>
13-
<li><code>addOption(key, value)</code>: This will add a specific option. See the <a href="http://datatables.net/usage/options">datatables documentation</a> for the list of options.</li>
14-
</ul>
15-
<h3>DTColumnBuilder</h3>
16-
These are the methods that can be called to create a datatable column to display:
17-
<ul>
18-
<li><code>newColumn(mData)</code>: This will create a <code>DTColumn</code> with the attribute of the object to display in the column.</li>
19-
</ul>
20-
<h3>DTColumn</h3>
21-
These are the methods that can be called to customized the columns:
22-
<ul>
23-
<li><code>withLabel(label)</code>: Set the label to display in the <code>&lt;thead&gt;</code>.</li>
24-
<li><code>withClass(sClass)</code>: Set the CSS class for the column.</li>
25-
<li><code>setVisible(bVisible)</code>: Set the visibility of the column.</li>
26-
</ul>
27-
<strong>Note</strong>: Of course, these helpers are not mandatory. You can directly pass the datatable options on the element attributes <code>dt-options</code> and <code>dt-columns</code>.
2+
<p>
3+
<strong>Note</strong>: Of course, these helpers are not mandatory. You can directly pass the datatable options on the element attributes <code>dt-options</code> and <code>dt-columns</code>.
4+
</p>
5+
<table datatable dt-options="dtOptions">
6+
<thead>
7+
<tr>
8+
<th>Helper/Wrapper</th>
9+
<th>API</th>
10+
<th>Description</th>
11+
</tr>
12+
</thead>
13+
<tbody>
14+
<tr>
15+
<td><code>$DTDefaultOptions</code></td>
16+
<td><code>setLanguageSource(sLanguageSource)</code></td>
17+
<td>
18+
Set the default language source for all datatables.
19+
<div class="highlight">
20+
<pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">'myModule'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'datatables'</span><span class="p">]).</span>
21+
<span class="nx">run</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$DTDefaultOptions</span><span class="p">)</span> <span class="p">{</span>
22+
<span class="nx">$DTDefaultOptions</span><span class="p">.</span><span class="nx">setLanguageSource</span><span class="p">(</span><span class="s1">'/path/to/language'</span><span class="p">);</span>
23+
<span class="p">});</span>
24+
</code></pre>
25+
</div>
26+
</td>
27+
</tr>
28+
<tr>
29+
<td><code>$DTDefaultOptions</code></td>
30+
<td><code>setLanguage(oLanguage)</code></td>
31+
<td>Set the default language for all datatables.</td>
32+
</tr>
33+
<tr>
34+
<td><code>$DTDefaultOptions</code></td>
35+
<td><code>setDisplayLength(iDisplayLength)</code></td>
36+
<td>
37+
Set the default numbers of items to display for all datatables.
38+
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">'myModule'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'datatables'</span><span class="p">]).</span>
39+
<span class="nx">run</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$DTDefaultOptions</span><span class="p">)</span> <span class="p">{</span>
40+
<span class="c1">// Display 25 items per page by default</span>
41+
<span class="nx">$DTDefaultOptions</span><span class="p">.</span><span class="nx">setDisplayLength</span><span class="p">(</span><span class="mi">25</span><span class="p">);</span>
42+
<span class="p">});</span>
43+
</code></pre>
44+
</div>
45+
</td>
46+
</tr>
47+
<tr>
48+
<td><code>DTOptionsBuilder</code></td>
49+
<td><code>newOptions()</code></td>
50+
<td>Create a wrapped datatables options.</td>
51+
</tr>
52+
<tr>
53+
<td><code>DTOptionsBuilder</code></td>
54+
<td><code>fromSource(sAjaxSource)</code></td>
55+
<td>Create a wrapped datatables options with initialized ajax source.</td>
56+
</tr>
57+
<tr>
58+
<td><code>DTOptions</code></td>
59+
<td><code>withOption(key, value)</code></td>
60+
<td>Add an option to the wrapped datatables options.</td>
61+
</tr>
62+
<tr>
63+
<td><code>DTOptions</code></td>
64+
<td><code>withSource(sAjaxSource)</code></td>
65+
<td>Set the ajax source.</td>
66+
</tr>
67+
<tr>
68+
<td><code>DTOptions</code></td>
69+
<td><code>withDataProp(sAjaxDataProp)</code></td>
70+
<td>Set the Ajax properties</td>
71+
</tr>
72+
<tr>
73+
<td><code>DTOptions</code></td>
74+
<td><code>withFnServerData(fn)</code></td>
75+
<td>Set the data server retrieval function. If not defined, it uses angular <code>$http</code> to call the requests.</td>
76+
</tr>
77+
<tr>
78+
<td><code>DTOptions</code></td>
79+
<td><code>withPaginationType(sPaginationType)</code></td>
80+
<td>Set the pagination type of the datatables</td>
81+
</tr>
82+
<tr>
83+
<td><code>DTOptions</code></td>
84+
<td><code>withLanguage(oLanguage)</code></td>
85+
<td>Set the language of the datatables. If not defined, it uses the default language set by datables, ie english.</td>
86+
</tr>
87+
<tr>
88+
<td><code>DTOptions</code></td>
89+
<td><code>withDisplayLength(iDisplayLength)</code></td>
90+
<td>Set the number of items per page to display.</td>
91+
</tr>
92+
<tr>
93+
<td><code>DTOptions</code></td>
94+
<td><code>withBootstrap()</code></td>
95+
<td>Add <a href="http://getbootstrap.com">bootstrap</a> compatibility.</td>
96+
</tr>
97+
<tr>
98+
<td><code>DTOptions</code></td>
99+
<td><code>withColReorder()</code></td>
100+
<td>Add <a href="https://datatables.net/extras/colreorder/">ColReorder compatibility.</a></td>
101+
</tr>
102+
<tr>
103+
<td><code>DTOptions</code></td>
104+
<td><code>withColReorderOption(key, value)</code></td>
105+
<td>Add option to the attribute <code>oColReorder</code>.</td>
106+
</tr>
107+
<tr>
108+
<td><code>DTOptions</code></td>
109+
<td><code>withColReorderOrder(aiOrder)</code></td>
110+
<td>Set the default column order.</td>
111+
</tr>
112+
<tr>
113+
<td><code>DTOptions</code></td>
114+
<td><code>withColReorderCallback(fnReorderCallback)</code></td>
115+
<td>Set the reorder callback function.</td>
116+
</tr>
117+
<tr>
118+
<td><code>DTOptions</code></td>
119+
<td><code>withColVis()</code></td>
120+
<td>Add <a href="https://datatables.net/extras/colvis/">ColVis</a> compatibility.</td>
121+
</tr>
122+
<tr>
123+
<td><code>DTOptions</code></td>
124+
<td><code>withColVisOption(key, value)</code></td>
125+
<td>Add option to the attribute <code>oColVis</code>.</td>
126+
</tr>
127+
<tr>
128+
<td><code>DTOptions</code></td>
129+
<td><code>withColVisStateChange(fnStateChange)</code></td>
130+
<td>Set the state change function.</td>
131+
</tr>
132+
<tr>
133+
<td><code>DTOptions</code></td>
134+
<td><code>withTableTools(sSwfPath)</code></td>
135+
<td>Add <a href="https://datatables.net/extras/tabletools/">TableTools</a> compatibility.</td>
136+
</tr>
137+
<tr>
138+
<td><code>DTOptions</code></td>
139+
<td><code>withTableToolsOption(key, value)</code></td>
140+
<td>Add option to the attribute <code>oTableTools</code>.</td>
141+
</tr>
142+
<tr>
143+
<td><code>DTOptions</code></td>
144+
<td><code>withTableToolsButtons(aButtons)</code></td>
145+
<td>Set the table tools buttons to display.</td>
146+
</tr>
147+
<tr>
148+
<td><code>DTColumnBuilder</code></td>
149+
<td><code>newColumn(mData, labe)</code></td>
150+
<td>Create a new wrapped <code>DTColumn</code>.</td>
151+
</tr>
152+
<tr>
153+
<td><code>DTColumn</code></td>
154+
<td><code>withOption(key, value)</code></td>
155+
<td>Add the option of the column.</td>
156+
</tr>
157+
<tr>
158+
<td><code>DTColumn</code></td>
159+
<td><code>withTitle(title)</code></td>
160+
<td>Set the title of the colum.</td>
161+
</tr>
162+
<tr>
163+
<td><code>DTColumn</code></td>
164+
<td><code>withClass(sClass)</code></td>
165+
<td>Set the CSS class of the column</td>
166+
</tr>
167+
<tr>
168+
<td><code>DTColumn</code></td>
169+
<td><code>notVisible()</code></td>
170+
<td>Hide the column.</td>
171+
</tr>
172+
<tr>
173+
<td><code>DTColumn</code></td>
174+
<td><code>notSortable()</code></td>
175+
<td>Set the column as not sortable</td>
176+
</tr>
177+
<tr>
178+
<td><code>DTColumn</code></td>
179+
<td><code>renderWith(mrender)</code></td>
180+
<td>
181+
Render each cell with the given parameter
182+
<div class="highlight">
183+
<pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">'myModule'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'datatables'</span><span class="p">]).</span>
184+
<span class="nx">controller</span><span class="p">(</span><span class="s1">'myCtrl'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="nx">DTColumnBuilder</span><span class="p">)</span> <span class="p">{</span>
185+
<span class="c1">// Data fetched: {gender: 'Mr', firstName: 'foo', lastName: 'bar'}</span>
186+
<span class="nx">$scope</span><span class="p">.</span><span class="nx">dtColumns</span> <span class="o">=</span> <span class="p">[</span>
187+
<span class="nx">DTColumnBuilder</span><span class="p">.</span><span class="nx">newColumn</span><span class="p">(</span><span class="s1">'firstName'</span><span class="p">).</span><span class="nx">withLabel</span><span class="p">(</span><span class="s1">'First name'</span><span class="p">).</span><span class="nx">renderWith</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">type</span><span class="p">,</span> <span class="nx">full</span><span class="p">)</span> <span class="p">{</span>
188+
<span class="k">return</span> <span class="nx">full</span><span class="p">.</span><span class="nx">gender</span> <span class="o">+</span> <span class="s1">' '</span> <span class="o">+</span> <span class="nx">full</span><span class="p">.</span><span class="nx">firstName</span><span class="p">;</span>
189+
<span class="p">});</span>
190+
<span class="p">];</span>
191+
<span class="p">});</span>
192+
</code></pre>
193+
</div>
194+
</td>
195+
</tr>
196+
</tbody>
197+
</table>

‎demo/partials/bootstrap.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<h3>Bootstrap integration</h3>
2+
<p>
3+
Angular Datables can also be compatible with <a href="http://getbootstrap.com">Twitter Bootstrap 3</a>.
4+
</p>
5+
<iframe style="width: 100%; height: 600px; border: 1px solid #e5e5e5;" src="http://embed.plnkr.co/fD7dxuRn2YAWF5DhySZn/preview"></iframe>

‎demo/partials/getting_started.html

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@ <h3>Dependencies</h3>
88
<li><a href="http://jquery.com">JQuery</a> (tested with version 1.11.0)</li>
99
<li><a href="https://datatables.net">Datatables</a> (tested with version 1.9.4)</li>
1010
</ul>
11+
<p>
12+
This module has been tested with the following datatables modules:
13+
</p>
14+
<ul>
15+
<li><a href="https://datatables.net/extras/colreorder/">ColReorder</a> with version 1.1.0</li>
16+
<li><a href="https://datatables.net/extras/colvis/">ColVis</a> with version 1.1.0</li>
17+
<li><a href="https://datatables.net/extras/tabletools/">TableTools</a> with version 2.2.0</li>
18+
</ul>
1119
</section>
1220
<section>
1321
<h3>Download</h3>
@@ -42,4 +50,10 @@ <h3>Installation</h3>
4250
<div class="highlight">
4351
<pre><code class="javascript"><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">'myModule'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'datatables'</span><span class="p">]);</span></code></pre>
4452
</p>
45-
</section>
53+
</section>
54+
<section>
55+
<h3>Additional Notes</h3>
56+
<p>
57+
This module does not support multiple datatables in the same page YET!
58+
</p>
59+
</section>

0 commit comments

Comments
 (0)