How to Use Angular-Datatables

- - posted in Technical | Tagged as angular,datatables | Comments

This post is about quick demo of angularjs + datatables usage. I am not gonna write too much theory, So here I will give only code snippet below.

References:

http://l-lin.github.io/angular-datatables
https://datatables.net

Code:

index.html



somejavascript.js

myModule.controller('myDatatablesIntCtrl', function($scope, $rootScope, $http, DTOptionsBuilder, DTColumnBuilder, DTDefaultOptions) {

var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions()
    .withDOM('<"row"<"col-md-8 col-sm-12"<"inline-controls"l>><"col-md-4 col-sm-12"<"pull-right"f>B>>t<"row"<"col-md-4 col-sm-12"<"inline-controls"T>><"col-md-4 col-sm-12"<"inline-controls text-center"i>><"col-md-4 col-sm-12"p>>')
//.withDOM('Blfrtip')
.withDisplayLength(25)
//.withScroller()
//.withOption('deferRender', true)
//.withOption('scrollY', 200)
//.withOption('scrollX', '100%')
//.withOption('responsive', true)
//.withColVis()
//.withOption('order', [[3, 'desc']])
// Add Bootstrap compatibility
.withBootstrap()
.withBootstrapOptions({
        TableTools: {
            classes: {
                container: 'btn-group',
                buttons: {
                    normal: 'btn btn-lg btn-primary'
                }
            }
        },
        ColVis: {
            classes: {
                masterButton: 'btn btn-primary'
            }
        },
        pagination: {
            classes: {
                ul: 'pagination pagination-sm'
            }
        }

    })
.withOption('retrieve', true)

//.withButtons(['columnsToggle', {
//    extend: 'collection',
//    text: 'Hide columns',
//    buttons: ['columnsVisibility'],
//    visibility: false
//}])

// Add Table tools compatibility
.withTableTools('/plugins/datatables/copy_csv_xls_pdf.swf')
    .withTableToolsOption('sRowSelect', 'multi')
    .withTableToolsButtons([{
        'sExtends': 'copy',
        'sButtonText': 'Copy To Clipboard',
        'bSelectedOnly': true,
        'oSelectorOpts': {
            filter: 'applied',
            order: 'current'
        }
    }, {
        'sExtends': 'collection',
        'sButtonText': 'Export Data',
        'aButtons': [{
                'sExtends': 'xls',
                'sButtonText': 'XLS',
                'sFileName': '.xls',
                'bSelectedOnly': true,
                'oSelectorOpts': {
                    filter: 'applied',
                    order: 'current'
                }
                // 'fnMouseover': function ( nButton, oConfig, oFlash ) {
                //     alert( 'Mosue over' );
                // }
            }, {
                'sExtends': 'pdf',
                'bFooter': true,
                'bHeader': true,
                // 'mColumns': [0, 1, 2, 3, 4, 5, 6, 7],
                'sPdfOrientation': 'landscape',
                'sFileName': '.pdf',
                'bSelectedOnly': true,
                'oSelectorOpts': {
                    filter: 'applied',
                    order: 'current'
                }
            }, {
                'sExtends': 'csv',
                'sButtonText': 'CSV',
                'sFileName': '.csv',
                'bSelectedOnly': true,
                'oSelectorOpts': {
                    filter: 'applied',
                    order: 'current'
                }
            }
            // {
            //     'sExtends': 'text',
            //     'sButtonText': 'PNG',
            //     'bHeader': false,
            //     'bSelectedOnly': true,
            //     'oSelectorOpts': {
            //         'page': 'current'
            //     },
            //     'fnClick': function() {
            //         // Convert html table to canvas element
            //         html2canvas($(".active table"), {
            //             onrendered: function(canvas) {
            //                 var context = canvas.getContext("2d");
            //                 // Save canvas to file
            //                 canvas.toBlob(function(blob) {
            //                     saveAs(blob, '.png');
            //                 }); 
            //             }
            //         });
            //     }
            // }
        ]

    }]);

$scope.$on("InvokeDatatablesCtrl", function(event, args) {

    console.log('Table initialisation start: ' + new Date().getTime());

    var table = $('#mydatatable_id').DataTable();
    $('#mydatatable_id')
        .on('init.dt', function() {
            console.log('Table initialisation complete: ' + new Date().getTime());
            table.buttons().container().appendTo('#dt-buttons');
        }).dataTable();



    // console.log(args);
    // console.log("Inside myDatatablesIntCtrl");
    // $rootScope.alert = "Please wait...";
    //              $rootScope.error = "";
    // $.ajax({
    //  url : args.url,
    //  data : {},
    //  successFunction : function(data,status,headers,config)
    //  {

    //      $scope.tabs.datatableslist = data.data;  

    //  },
    // });

    // $resource(args.url).get().$promise.then(function(data)
    //      {

    //          if('code' in data && data.code == "0")
    //          {
    //             $rootScope.alert = data.message;
    //             $rootScope.error = "";
    //              if('redirect' in data && data.redirect != "")
    //              {
    //                  window.location = data.redirect;
    //              }

    //             $scope.tabs.viewrota.list = data.data;
    //             //console.log($scope.tabs.viewrota.list);

    //         }
    //          else if ('error' in data && data.error != "")
    //          {
    //                  $rootScope.error = data.error;  
    //          }

    // });
});

});

html or ctp file


Heading1 Heading2 Heading3
Column1 Column2 Column3





Gravatar of Ashwani Kumar

Recent posts


Subscribe



Your Feedback encourages me




Learning and Developments

One Month Rails



, AWS Facebook Flash, Forwarding, GOD,Chat,Coffee Github,Feedback,Repo Google,Search HAProxy, IOT, IP-block JQuery Load MQ MQTT, Messaging Octopress Octopress, Plugin Plugin, Port S3, SSH, Shell,Commands Soapui, Tag Tag, Tree, Tunneling XML XML, XServer, Xming ajax, angular, animated balancing cloud, commenting, connectivity datatables diaspora dropdown geocoding grep, ipaddress, ipv6, java, mysql nokogiri, octopress-migration octopress-plugin openssl powershell rails, repo reviews ruby, script scripts, security, sharepoint shell ssh, telnet, vi, vieditor vim, visualblock, webattacks windows,cleanup windowsxp