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

Commit d78139d

Browse files
l-linl-lin
committed
FixedColumns integration enhancement #142 
1 parent c88bf36 commit d78139d

21 files changed

+2536
-46
lines changed

‎demo/api/apiOptionsBuilder.html

Lines changed: 84 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ <h3><code>DTOptionsBuilder</code></h3>
4848
</tr>
4949
<tr>
5050
<td><code>DTOptionsBuilder</code></td>
51-
<td><code>fromSource(sAjaxSource)</code></td>
51+
<td><code>fromSource(ajax)</code></td>
5252
<td>
5353
<p>Create a wrapped datatables options with initialized ajax source.</p>
5454
<div hljs language="js">
@@ -118,7 +118,7 @@ <h3><code>DTOptionsBuilder</code></h3>
118118
</tr>
119119
<tr>
120120
<td><code>DTOptions</code></td>
121-
<td><code>withSource(sAjaxSource)</code></td>
121+
<td><code>withSource(ajax)</code></td>
122122
<td>
123123
<p>Set the ajax source.</p>
124124
<div hljs language="js">
@@ -313,7 +313,8 @@ <h3><code>DTOptionsBuilder</code></h3>
313313
<td>
314314
<p>Add <a href="http://getbootstrap.com">bootstrap</a> compatibility.</p>
315315
<div hljs language="js">
316-
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
316+
angular.module('myModule', ['datatables', 'datatables.bootstrap'])
317+
.controller('MyCtrl', MyCtrl);
317318
function MyCtrl(DTOptionsBuilder) {
318319
var vm = this;
319320
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
@@ -331,7 +332,12 @@ <h3><code>DTOptionsBuilder</code></h3>
331332
Angular datatables provides default options. You can check them out on <a href="https://github.com/l-lin/angular-datatables/blob/dev/src/angular-datatables.bootstrap.options.js">Github</a>.
332333
</p>
333334
<div hljs language="js">
334-
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
335+
angular.module('myModule', [
336+
'datatables',
337+
'datatables.bootstrap',
338+
'datatables.tabletools',
339+
'datatables.colvis'
340+
]).controller('MyCtrl', MyCtrl);
335341
function MyCtrl(DTOptionsBuilder) {
336342
var vm = this;
337343
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
@@ -374,7 +380,8 @@ <h3><code>DTOptionsBuilder</code></h3>
374380
<td>
375381
<p>Add <a href="https://datatables.net/extras/colreorder/">ColReorder compatibility.</a></p>
376382
<div hljs language="js">
377-
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
383+
angular.module('myModule', ['datatables', 'datatables.colreorder'])
384+
.controller('MyCtrl', MyCtrl);
378385
function MyCtrl(DTOptionsBuilder) {
379386
var vm = this;
380387
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
@@ -386,8 +393,8 @@ <h3><code>DTOptionsBuilder</code></h3>
386393
</p>
387394
<div hljs language="json">
388395
{
389-
"sAjaxSource": "data.json",
390-
"sDom": "Rlfrtip"
396+
"ajax": "data.json",
397+
"dom": "Rlfrtip"
391398
}
392399
</div>
393400
<p class="text-info">
@@ -401,7 +408,8 @@ <h3><code>DTOptionsBuilder</code></h3>
401408
<td>
402409
<p>Add option to the attribute <code>oColReorder</code>.</p>
403410
<div hljs language="js">
404-
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
411+
angular.module('myModule', ['datatables', 'datatables.colreorder'])
412+
.controller('MyCtrl', MyCtrl);
405413
function MyCtrl(DTOptionsBuilder) {
406414
var vm = this;
407415
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
@@ -415,8 +423,8 @@ <h3><code>DTOptionsBuilder</code></h3>
415423
</p>
416424
<div hljs language="json">
417425
{
418-
"sAjaxSource": "data.json",
419-
"sDom": "Rlfrtip",
426+
"ajax": "data.json",
427+
"dom": "Rlfrtip",
420428
"oColReorder": {
421429
"iFixedColumnsRight": 1
422430
}
@@ -430,7 +438,8 @@ <h3><code>DTOptionsBuilder</code></h3>
430438
<td>
431439
<p>Set the default column order.</p>
432440
<div hljs language="js">
433-
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
441+
angular.module('myModule', ['datatables', 'datatables.colreorder'])
442+
.controller('MyCtrl', MyCtrl);
434443
function MyCtrl(DTOptionsBuilder) {
435444
var vm = this;
436445
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
@@ -444,8 +453,8 @@ <h3><code>DTOptionsBuilder</code></h3>
444453
</p>
445454
<div hljs language="json">
446455
{
447-
"sAjaxSource": "data.json",
448-
"sDom": "Rlfrtip",
456+
"ajax": "data.json",
457+
"dom": "Rlfrtip",
449458
"oColReorder": {
450459
"aiOrder": [1, 0, 2]
451460
}
@@ -459,7 +468,8 @@ <h3><code>DTOptionsBuilder</code></h3>
459468
<td>
460469
<p>Set the reorder callback function.</p>
461470
<div hljs language="js">
462-
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
471+
angular.module('myModule', ['datatables', 'datatables.colreorder']])
472+
.controller('MyCtrl', MyCtrl);
463473
function MyCtrl(DTOptionsBuilder) {
464474
var vm = this;
465475
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
@@ -474,8 +484,8 @@ <h3><code>DTOptionsBuilder</code></h3>
474484
</p>
475485
<div hljs language="json">
476486
{
477-
"sAjaxSource": "data.json",
478-
"sDom": "Rlfrtip",
487+
"ajax": "data.json",
488+
"dom": "Rlfrtip",
479489
"oColReorder": {
480490
"fnReorderCallback": function () {
481491
console.log('Columns order has been changed with: ' + this.fnOrder());
@@ -491,7 +501,8 @@ <h3><code>DTOptionsBuilder</code></h3>
491501
<td>
492502
<p>Add <a href="https://datatables.net/extras/colvis/">ColVis</a> compatibility.</p>
493503
<div hljs language="js">
494-
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
504+
angular.module('myModule', ['datatables', 'datatables.colvis']])
505+
.controller('MyCtrl', MyCtrl);
495506
function MyCtrl(DTOptionsBuilder) {
496507
var vm = this;
497508
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
@@ -503,8 +514,8 @@ <h3><code>DTOptionsBuilder</code></h3>
503514
</p>
504515
<div hljs language="json">
505516
{
506-
"sAjaxSource": "data.json",
507-
"sDom": "Clfrtip"
517+
"ajax": "data.json",
518+
"dom": "Clfrtip"
508519
}
509520
</div>
510521
<p class="text-info">
@@ -518,7 +529,8 @@ <h3><code>DTOptionsBuilder</code></h3>
518529
<td>
519530
<p>Add option to the attribute <code>oColVis</code>.</p>
520531
<div hljs language="js">
521-
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
532+
angular.module('myModule', ['datatables', 'datatables.colvis']])
533+
.controller('MyCtrl', MyCtrl);
522534
function MyCtrl(DTOptionsBuilder) {
523535
var vm = this;
524536
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
@@ -532,8 +544,8 @@ <h3><code>DTOptionsBuilder</code></h3>
532544
</p>
533545
<div hljs language="json">
534546
{
535-
"sAjaxSource": "data.json",
536-
"sDom": "Clfrtip",
547+
"ajax": "data.json",
548+
"dom": "Clfrtip",
537549
"oColVis": {
538550
"aiExclude": [2]
539551
}
@@ -547,7 +559,8 @@ <h3><code>DTOptionsBuilder</code></h3>
547559
<td>
548560
<p>Set the state change function.</p>
549561
<div hljs language="js">
550-
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
562+
angular.module('myModule', ['datatables', 'datatables.colvis'])
563+
.controller('MyCtrl', MyCtrl);
551564
function MyCtrl(DTOptionsBuilder) {
552565
var vm = this;
553566
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
@@ -564,8 +577,8 @@ <h3><code>DTOptionsBuilder</code></h3>
564577
</p>
565578
<div hljs language="json">
566579
{
567-
"sAjaxSource": "data.json",
568-
"sDom": "Clfrtip",
580+
"ajax": "data.json",
581+
"dom": "Clfrtip",
569582
"oColVis": {
570583
"fnStateChange": function (iColumn, bVisible) {
571584
console.log('The column', iColumn, 'has changed its status to', bVisible);
@@ -581,7 +594,8 @@ <h3><code>DTOptionsBuilder</code></h3>
581594
<td>
582595
<p>Add <a href="https://datatables.net/extras/tabletools/">TableTools</a> compatibility.</p>
583596
<div hljs language="js">
584-
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
597+
angular.module('myModule', ['datatables', 'datatables.tabletools'])
598+
.controller('MyCtrl', MyCtrl);
585599
function MyCtrl(DTOptionsBuilder) {
586600
var vm = this;
587601
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
@@ -596,8 +610,8 @@ <h3><code>DTOptionsBuilder</code></h3>
596610
</p>
597611
<div hljs language="json">
598612
{
599-
"sAjaxSource": "data.json",
600-
"sDom": "Tlfrtip",
613+
"ajax": "data.json",
614+
"dom": "Tlfrtip",
601615
"oTableTools": {
602616
"sSwfPath": "vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf"
603617
}
@@ -614,7 +628,8 @@ <h3><code>DTOptionsBuilder</code></h3>
614628
<td>
615629
<p>Add option to the attribute <code>oTableTools</code>.</p>
616630
<div hljs language="js">
617-
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
631+
angular.module('myModule', ['datatables', 'datatables.tabletools'])
632+
.controller('MyCtrl', MyCtrl);
618633
function MyCtrl(DTOptionsBuilder) {
619634
var vm = this;
620635
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
@@ -628,8 +643,8 @@ <h3><code>DTOptionsBuilder</code></h3>
628643
</p>
629644
<div hljs language="json">
630645
{
631-
"sAjaxSource": "data.json",
632-
"sDom": "Tlfrtip",
646+
"ajax": "data.json",
647+
"dom": "Tlfrtip",
633648
"oTableTools": {
634649
"sSwfPath": "vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf",
635650
"sRowSelect": "single"
@@ -644,7 +659,8 @@ <h3><code>DTOptionsBuilder</code></h3>
644659
<td>
645660
<p>Set the table tools buttons to display.</p>
646661
<div hljs language="js">
647-
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
662+
angular.module('myModule', ['datatables', 'datatables.tabletools'])
663+
.controller('MyCtrl', MyCtrl);
648664
function MyCtrl(DTOptionsBuilder) {
649665
var vm = this;
650666
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
@@ -665,8 +681,8 @@ <h3><code>DTOptionsBuilder</code></h3>
665681
</p>
666682
<div hljs language="json">
667683
{
668-
"sAjaxSource": "data.json",
669-
"sDom": "Tlfrtip",
684+
"ajax": "data.json",
685+
"dom": "Tlfrtip",
670686
"oTableTools": {
671687
"sSwfPath": "vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf",
672688
"aButtons": [
@@ -684,7 +700,7 @@ <h3><code>DTOptionsBuilder</code></h3>
684700
</tr>
685701
<tr>
686702
<td><code>DTOptions</code></td>
687-
<td><code>withDOM(sDom)</code></td>
703+
<td><code>withDOM(dom)</code></td>
688704
<td>
689705
<p>Override the <a href="http://datatables.net/examples/basic_init/dom.html">DOM positioning</a> of the DataTable.</p>
690706
<div hljs language="js">
@@ -706,7 +722,8 @@ <h3><code>DTOptionsBuilder</code></h3>
706722
<td>
707723
<p>Add <a href="http://datatables.net/extensions/scroller/">Scroller</a> compatibility.</p>
708724
<div hljs language="js">
709-
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
725+
angular.module('myModule', ['datatables', 'datatables.scroller'])
726+
.controller('MyCtrl', MyCtrl);
710727
function MyCtrl(DTOptionsBuilder) {
711728
var vm = this;
712729
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
@@ -718,8 +735,8 @@ <h3><code>DTOptionsBuilder</code></h3>
718735
</p>
719736
<div hljs language="json">
720737
{
721-
"sAjaxSource": "data.json",
722-
"sDom": "lfrtipS"
738+
"ajax": "data.json",
739+
"dom": "lfrtipS"
723740
}
724741
</div>
725742
<p class="text-info">
@@ -729,13 +746,14 @@ <h3><code>DTOptionsBuilder</code></h3>
729746
</tr>
730747
<tr>
731748
<td><code>DTOptions</code></td>
732-
<td><code>withColumnFilter()</code></td>
749+
<td><code>withColumnFilter(columnFilterOptions)</code></td>
733750
<td>
734751
<p>
735752
Add <a href="http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html">Columnfilter</a> compatibility.
736753
</p>
737754
<div hljs language="js">
738-
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
755+
angular.module('myModule', ['datatables', 'datatables.columnfilter'])
756+
.controller('MyCtrl', MyCtrl);
739757
function MyCtrl(DTOptionsBuilder) {
740758
var vm = this;
741759
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
@@ -745,5 +763,31 @@ <h3><code>DTOptionsBuilder</code></h3>
745763
}
746764
</div>
747765
</td>
766+
</tr>
767+
<tr>
768+
<td><code>DTOptions</code></td>
769+
<td><code>withFixedColumns(fixedColumnsOptions)</code></td>
770+
<td>
771+
<p>
772+
Add <a href="https://datatables.net/extensions/fixedcolumns/">FixedColumns</a> compatibility.
773+
</p>
774+
<div hljs language="js">
775+
angular.module('myModule', ['datatables', 'datatables.fixedcolumns'])
776+
.controller('MyCtrl', MyCtrl);
777+
function MyCtrl(DTOptionsBuilder) {
778+
var vm = this;
779+
vm.dtOptions = DTOptionsBuilder.newOptions()
780+
.withOption('scrollY', '300px')
781+
.withOption('scrollX', '100%')
782+
.withOption('scrollCollapse', true)
783+
.withOption('paging', false)
784+
.withFixedColumns({
785+
leftColumns: 1,
786+
rightColumns: 1
787+
});
788+
}
789+
</div>
790+
</td>
791+
</tr>
748792
</tbody>
749793
</table>

‎demo/app.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ angular.module('showcase', [
2727
'showcase.withResponsive',
2828
'showcase.withScroller',
2929
'showcase.withTableTools',
30+
'showcase.withFixedColumns',
3031

3132
'showcase.usages',
3233
'ui.bootstrap',

‎demo/usages.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,5 +84,8 @@ angular.module('showcase.usages', ['ngResource'])
8484
}, {
8585
name: 'withAngularTranslate',
8686
label: 'With Angular Translate'
87+
}, {
88+
name: 'withFixedColumns',
89+
label: 'With Fixed Columns'
8790
}]
8891
});

0 commit comments

Comments
 (0)