Angular Datatable Notes

1. 1. Datatable Options
2. 2. Reloading Datatable
3. 3. Create a New Filter
4. 4. Missing Buttons on Data Change

Recently, I am developing Apps by using angular datatables.

The followings are some issues or note that I have to record.

Datatable Options

Selected datatable options…

vm.dtOptions = DTOptionsBuilder.newOptions()
    .withDOM('<"html5buttons"B>lTfgitp')
    .withOption('deferRender', true) // deferred rendering for additional speed of initialisation
    .withOption('deferLoading', true) // delay the loading of server-side data until second draw
    .withOption('processing', true) // add processing indicator
    // change the options in the page length select list.
    .withOption('lengthMenu', [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, 'ALL']])
    .withOption('aoColumnDefs', [{"bVisible": false, "aTargets": [3, 4]}]) //could affect search function
    // .withOption('scrollX', '600px') // add horizontal scroll
    // .withOption('scrollY', '500px') // add vertical scroll 
    // .withOption('scrollCollapse', true) // table collapse on less data
    // .withOption('paging', false) // disable pagination
    // .withOption('searchCols', [null, null, null, { "search": ''}]) // define an initial search for individual columns.
    .withOption('aoColumnDefs', [{"bVisible": false, "aTargets": [3, 4]}]) //enable or disable the display of this column

More options and instruction can refer datatable options.

Reloading Datatable

Calling dtInstance..rerender()…

<table datatable="ng" dt-options="ps.dtOptions" dt-instance="ps.dtInstance">
</table>

$scope.reloadData = function () {
	//call api and get some data
        setTimeout(function () {
            $scope.$apply(function () {
            //  vm.dtInstance.rerender();
                $scope.dtInstance._renderer.rerender();
            });
        }, 1);
    };

Create a New Filter

Create a new filter for datatable by calling function $.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {}.

Then, redraw the table, dtInstance.dataTable.fnDraw(), to apply the filter.

For example:

vm.reloadDataByFilter = function () {
        $.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {
           // `aData` returns current data array in the table   
           { // some logic here...
            var val = aData.slice(5);
            var res = false;
            angular.forEach(val, function (v, k) {
                v = Number(v.replace(/[^0-9\.]+/g, "")); //remove currency symbol
                res = vm.checkValue(v, aData[4], aData[3]) || res;
                if (res) return res;
            });
            return res;
           }	
        });
        vm.dtInstance.dataTable.fnDraw();
    };

• Missing Buttons on Data Change

<%--angular-datatables - v0.5.2--%>
<script src="../dataTables/datatables.min.js"></script>
<script src="../dataTables/angular-datatables.min.js"></script>
<script src="../dataTables/angular-datatables.buttons.min.js"></script>


//datatable controller 
$scope.dtOptions = DTOptionsBuilder.newOptions()
        .withDOM('<"html5buttons"B>lTfgitp')
        .withButtons([
            {extend: 'copy'},
            {extend: 'csv'},
            {
                extend: 'print',
                customize: function (win) {
                    $(win.document.body).addClass('white-bg');
                    $(win.document.body).css('font-size', '10px');

                    $(win.document.body).find('table')
                        .addClass('compact')
                        .css('font-size', 'inherit');
                }
            }
        ]);

When the data is changed, the buttons such as ‘Copy’, ‘Print’ and ‘CSV’ from datatable-buttons plugin disappear.

Cause: It seems the datatable dose not redraw the options like button plugin after data change.

Solution:
We can manually add button-options by using angular-datatable drawCallback function, where the function is called every time DataTables performs a draw.

var buttonsOpt = [
        {
            text: '<i class="fa fa-copy"></i>',
            extend: 'copy'
        },
        {
            text: '<i class="fa fa-file-text-o"></i>',
            extend: 'csv'
        }
    ];

vm.dtOptions = DTOptionsBuilder.newOptions()
    .withDOM('<"html5buttons"B>lTfgitp')
    .withButtons(buttonsOpt.slice());

vm.dtOptions.drawCallback = function () {
        var api = $(this).DataTable();

        new $.fn.dataTable.Buttons(api, {
            buttons: buttonsOpt.slice()
        });

        $(this).parent().find('.dt-buttons').replaceWith(api.buttons().container());
    };

Ref:

1. datatables