Using Angular Data Table in your Project

Introduction :

Hi Friends in this blog i am sharing knowledge with you that how to implement angular dataTables in your project. For that first of all you need to attach follwing two dependencies file in your project.

1. Angular-datatable.js
2. jquery-dataTable.js

  After that you need to add 'datatables' depenpendecy in app.js file in your project then after this you just need to do your code with following way to implement angular dataTable in your project.

Step 1 : In your html file add datatable directive in table tag to implement dataTables.

<table datatable="" dt-options="dtOptions" dt-columns="dtColumnBuilder" dt-column-defs="dtColumnDefBuilder" dt-instance="dtInstance" class="table table-hover table-bordered table-striped row-border hover  smart-form borderL-R" >
 

Step 2 : In your Js File you just need to add DTColumnBuilder and DTOptionsBuilder dependencies in your controller.

$scope.dtColumnBuilder = [
        DTColumnBuilder.newColumn('id').notSortable(),
        DTColumnBuilder.newColumn('fileName').withTitle('File Name'),
        DTColumnBuilder.newColumn('createDate').withTitle('Upload Date'),
        DTColumnBuilder.newColumn('contractFile.fileSize').withTitle('Size'),
        DTColumnBuilder.newColumn('contractFile.fileExtention').withTitle('Extension'),
        DTColumnBuilder.newColumn('contractFile.preview').withTitle('Preview'),
    ];

     $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
            dataSrc: function(response) {
                checkError(response);
                $scope.pageScope.clientFiles = response.DATA;
                $scope.addIndexing($scope.pageScope.clientFiles);

                return response.DATA;
            },
            url: '/api/v1/files/getAllByPagination', // Url to get data
            type: 'POST',
            headers: {
                'x-auth-token': $sessionService.get('x-auth-token')
            },
            data : function(data, dtInstance){
                data.query = $scope.query;
                return data;
            }
        }).withOption('serverSide', true).withOption('order', [2, 'desc']).withPaginationType('full_numbers').withDOM('frtlip');

Thanks for reading my blog, your comments will be valuable.