How to add custom button

[Gajendrasinh]

I want to add my custome botton in near of Search box. how to add new button ni angular js datatable

[l-lin]

You need to define your own dom.

[Gajendrasinh]

In javascript datatable i can done custom dom. but i m getting problem to
implement in angular js datatbale

Best Regards,
Gajendrasinh Zala

On Mon, Aug 17, 2015 at 1:52 AM, Louis LIN [email protected] wrote:

You need to define your own dom
https://datatables.net/reference/option/dom.

—
Reply to this email directly or view it on GitHub
#402 (comment)
.

[l-lin]

I assume you want a custom button that can use Angular directives.
Here a solution that is a bit "hackish":

• First, define your custom element in your dom

angular.module('datatablesSampleApp', ['datatables'])
    .controller('SimpleCtrl', SimpleCtrl);

function SimpleCtrl(DTOptionsBuilder, DTColumnDefBuilder) {
    var vm = this;
    vm.dtOptions = DTOptionsBuilder.newOptions()
        // Add your custom button in the DOM
        .withDOM('<"custom-btn">pitrfl');
    vm.dtColumnDefs = [
        DTColumnDefBuilder.newColumnDef(0),
        DTColumnDefBuilder.newColumnDef(1).notVisible(),
        DTColumnDefBuilder.newColumnDef(2).notSortable()
    ];
}

• Create your directive customBtn:

angular.module('datatablesSampleApp')
.directive('customBtn', customBtn);

function customBtn() {
    return {
        restrict: 'C', // Notice the C for "class" restriction
        template: '<h1>Foobar</h1>'
    };
}

• Just this is not enough because the HTML element is added by DataTables. So Angular does not know its existence. So we need to compile it so that Angular takes into account the customBtn directive. To do that, we need to create another directive that wraps the table. This wrapper will be used to compile the customBtn directive once the table is rendered:

angular.module('datatablesSampleApp')
.directive('datatableWrapper', datatableWrapper);
function datatableWrapper($timeout, $compile) {
    return {
        restrict: 'E',
        transclude: true,
        template: '<ng-transclude></ng-transclude>',
        link: link
    };

    function link(scope, element) {
        // Using $timeout service as a "hack" to trigger the callback function once everything is rendered
        $timeout(function () {
            // Compiling so that angular knows the button has a directive
            $compile(element.find('.custom-btn'))(scope);
        }, 0, false);
    }
}

• Finally, use the 2 directives:

<div ng-controller="SimpleCtrl as showCase">
    <datatable-wrapper>
      <table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns">
      </table>
    </datatable-wrapper>
  </div>

Result on codepen.

[Gajendrasinh]

<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="

http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"
rel="stylesheet">

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.angularjs.org/1.3.13/angular.js"></script>
    <script src="js/angular-resource.min.js"></script>
<script src="

http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files

as needed -->
<script src=" https://rawgithub.com/l-lin/angular-datatables/v0.4.3/dist/angular-datatables.min.js "></script>

<script type="text/javascript">
angular.module('datatablesSampleApp', ['datatables', 'ngResource'])

.controller('SimpleCtrl', SimpleCtrl)
.directive('datatableWrapper', datatableWrapper)
.directive('customBtn', customBtn);

function SimpleCtrl(DTOptionsBuilder, DTColumnBuilder, $resource,
$interval, $http) {
var vm = this;

vm.dtOptions =DTOptionsBuilder.fromFnPromise(function() {
return $resource('
https://rawgit.com/l-lin/angular-datatables/master/data.json').query().$promise
;
})
.withPaginationType('full_numbers')
// Add your custom button in the DOM
.withDOM('<"custom-btn">lftirp');

vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name')
];

}

/**

• This wrapper is only used to compile your custom button
  */
  function datatableWrapper($timeout, $compile) {
  return {
  restrict: 'E',
  transclude: true,
  template: '',
  link: link
  };

  function link(scope, element) {
  // Using $timeout service as a "hack" to trigger the callback function
  once everything is rendered
  $timeout(function () {
  // Compiling so that angular knows the button has a directive
  $compile(element.find('.custom-btn'))(scope);
  }, 0, false);
  }
  }

/**

• Your custom button
  */
  function customBtn() {
  return {
  restrict: 'C',
  template: '

  Foobar

  '
  };
  }
  </script>

This my code when i am using .fromFnPromise at the time custom button not
working

Best Regards,
Gajendrasinh Zala

On Fri, Aug 28, 2015 at 3:01 PM, Gajendrasinh Zala <
[email protected]> wrote:

Thank you for reply me...

I have use same code in my project

HTML

JS

xTractApp.controller('RenameUserController',
RenameUserController).directive('datatableWrapper',
datatableWrapper).directive('customBtn', customBtn);;

function RenameUserController($compile, $scope, $resource,
DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.selected = {};
vm.selectAll = false;
vm.toggleAll = toggleAll;
vm.toggleOne = toggleOne;

var titleHtml = '<input ng-model="showCase.selectAll"

ng-click="showCase.toggleAll(showCase.selectAll, showCase.selected)"
type="checkbox">';

vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
        return $resource('RenameUserData').query().$promise;
    })
    .withOption('createdRow', function(row, data, dataIndex) {
        // Recompiling so we can bind Angular directive to the DT
        $compile(angular.element(row).contents())($scope);
    })
    .withOption('headerCallback', function(header) {
        if (!$scope.headerCompiled) {
            // Use this headerCompiled field to only compile header

once
$scope.headerCompiled = true;
$compile(angular.element(header).contents())($scope);
}
})
// Add Table tools compatibility
.withTableTools('js/libs/datatable/copy_csv_xls.swf')
.withTableToolsButtons([
'xls'
])

.withPaginationType('full_numbers').withDOM('T<"custom-btn">lfrtip');
vm.dtColumns = [

DTColumnBuilder.newColumn(null).withTitle(titleHtml).notSortable().withClass('td-size')
.renderWith(function(data, type, full, meta) {
vm.selected[full.id] = false;
return '';
}),
//DTColumnBuilder.newColumn('beforeRename').withTitle('Before
Rename'),
DTColumnBuilder.newColumn(null).withTitle('Before
Rename').renderWith(function(data, type, full, meta) {
return '

' + data.beforeRename + '

';
}),
//DTColumnBuilder.newColumn('afterRename').withTitle('After
Rename'),
DTColumnBuilder.newColumn(null).withTitle('After
Rename').renderWith(function(data, type, full, meta) {
return '

' + data.afterRename + '

';
}),
DTColumnBuilder.newColumn('time').withTitle('Time'),
DTColumnBuilder.newColumn('date').withTitle('Date')
];

function toggleAll (selectAll, selectedItems) {
    for (var id in selectedItems) {
        if (selectedItems.hasOwnProperty(id)) {
            selectedItems[id] = selectAll;
        }
    }
}
function toggleOne (selectedItems) {
    var me = this;
    for (var id in selectedItems) {
        if (selectedItems.hasOwnProperty(id)) {
            if(!selectedItems[id]) {
                me.selectAll = false;
                return;
            }
        }
    }
    me.selectAll = true;
}

}

/**

• This wrapper is only used to compile your custom button
  */
  function datatableWrapper($timeout, $compile) {
  return {
  restrict: 'E',
  transclude: true,
  template: '',
  link: link
  };

  function link(scope, element) {
  // Using $timeout service as a "hack" to trigger the callback function
  once everything is rendered
  $timeout(function () {
  // Compiling so that angular knows the button has a directive
  $compile(element.find('.custom-btn'))(scope);
  }, 0, false);
  }
  }

/**

• Your custom button
  */
  function customBtn() {
  return {
  restrict: 'C',
  template: '

  Foobar

  '
  };
  }

Cul i m not getting value

Footer

on dom possition

Best Regards,
Gajendrasinh Zala

On Sun, Aug 23, 2015 at 11:06 PM, Louis LIN [email protected]
wrote:

I assume you want a custom button that can use Angular directives.
Here a solution that is a bit "hackish":

• First, define your custom element in your dom
  https://datatables.net/reference/option/dom

angular.module('datatablesSampleApp', ['datatables'])
.controller('SimpleCtrl', SimpleCtrl);
function SimpleCtrl(DTOptionsBuilder, DTColumnDefBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions()
// Add your custom button in the DOM
.withDOM('<"custom-btn">pitrfl');
vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0),
DTColumnDefBuilder.newColumnDef(1).notVisible(),
DTColumnDefBuilder.newColumnDef(2).notSortable()
];
}

• Create your directive customBtn:

angular.module('datatablesSampleApp')
.directive('customBtn', customBtn);
function customBtn() {
return {
restrict: 'C', // Notice the C for "class" restriction
template: '

Foobar

'
};
}

• Just this is not enough because the HTML element is added by
  DataTables. So Angular does not know its existence. So we need to compile
  it so that Angular takes into account the customBtn directive. To do
  that, we need to create another directive that wraps the table. This
  wrapper will be used to compile the customBtn directive once the
  table is rendered:

angular.module('datatablesSampleApp')
.directive('datatableWrapper', datatableWrapper);function datatableWrapper($timeout, $compile) {
return {
restrict: 'E',
transclude: true,
template: '',
link: link
};

function link(scope, element) {
    // Using $timeout service as a "hack" to trigger the callback function once everything is rendered
    $timeout(function () {
        // Compiling so that angular knows the button has a directive
        $compile(element.find('.custom-btn'))(scope);
    }, 0, false);
}

}

• Finally, use the 2 directives:

Result on codepen http://codepen.io/l-lin/pen/zGgGaV?editors=101.

—
Reply to this email directly or view it on GitHub
#402 (comment)
.

[Gajendrasinh]

I am getting this error Error: [$compile:multidir] Multiple directives
[datatableWrapper (module: ls), datatableWrapper (module: ls)] asking for
transclusion on: how to solve this

Best Regards,
Gajendrasinh Zala

On Sun, Aug 23, 2015 at 11:06 PM, Louis LIN [email protected]
wrote:

I assume you want a custom button that can use Angular directives.
Here a solution that is a bit "hackish":

• First, define your custom element in your dom
  https://datatables.net/reference/option/dom

angular.module('datatablesSampleApp', ['datatables'])
.controller('SimpleCtrl', SimpleCtrl);
function SimpleCtrl(DTOptionsBuilder, DTColumnDefBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions()
// Add your custom button in the DOM
.withDOM('<"custom-btn">pitrfl');
vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0),
DTColumnDefBuilder.newColumnDef(1).notVisible(),
DTColumnDefBuilder.newColumnDef(2).notSortable()
];
}

• Create your directive customBtn:

angular.module('datatablesSampleApp')
.directive('customBtn', customBtn);
function customBtn() {
return {
restrict: 'C', // Notice the C for "class" restriction
template: '

Foobar

'
};
}

• Just this is not enough because the HTML element is added by
  DataTables. So Angular does not know its existence. So we need to compile
  it so that Angular takes into account the customBtn directive. To do
  that, we need to create another directive that wraps the table. This
  wrapper will be used to compile the customBtn directive once the table
  is rendered:

angular.module('datatablesSampleApp')
.directive('datatableWrapper', datatableWrapper);function datatableWrapper($timeout, $compile) {
return {
restrict: 'E',
transclude: true,
template: '',
link: link
};

function link(scope, element) {
    // Using $timeout service as a "hack" to trigger the callback function once everything is rendered
    $timeout(function () {
        // Compiling so that angular knows the button has a directive
        $compile(element.find('.custom-btn'))(scope);
    }, 0, false);
}

}

• Finally, use the 2 directives:

Result on codepen http://codepen.io/l-lin/pen/zGgGaV?editors=101.

—
Reply to this email directly or view it on GitHub
#402 (comment)
.

[wcaaan]

Can anyone please tell me how to render this customBtn inside Datatable coloum at the End ??

[bhoriuchi]

you can accomplish this using the draw.dt event.

in this example i have added the attribute data-compile="true" to the button directive i.e

<div my-button data-compile="true"></div>

pseudo code for the standard setup so may need to be modified for angular-datatables

angular.module(...)
.directive('datatable', function() {
    return {
        template: ...,
        restrict: 'AE',
        ...
        controller: ['$scope', '$element', '$attrs', '$compile', function($scope, $element, $attrs, $compile) {
            $($element).DataTable(options).on('draw.dt', function() {
                $compile($($element).find('[data-compile="true"]'))($scope);
            });
        }]
    };
});