AngularJS is calling data into DataTable

Order No	Customer name	Order Phone	Sales Date	Update	File
{{item.OrderNo}}	{{item.CustomerName}}	{{item.CustomerPhone}}	{{item.OrderDate}}

(function () {
    //Angularjs contoller
    app.controller('HomeInvoiceList',[ function ($scope, $http,$compile, $filter) {
        $scope.Sale = new Object();
        $scope.list = true;
        $scope.invoice = false;
        // declaring a global scope variable

        $scope.Delete = function(){
            // Need to implement
        }

        $scope.ShowHideEdit = function()
        {
            $scope.list = $scope.list==true? false: true;
            $scope.invoice =$scope.invoice==true? false: true;
        }
        
        var init = function () {
            GetCart();
            GetAllSales();
        }; // end of ini



"createdRow": function ( row, data, index ) {
                    $compile(row)($scope);  //add this to compile the DOM
                },
function bindDatatable(){
            $("#dataTable15").DataTable({
                "processing": false,
                "serverSide": false,
                "paging": true,
                "destroy": true,
                pageLength: 25,
                buttons: [
                    { extend: 'copy' },
                    { extend: 'csv' },
                    { extend: 'excel', title: 'ExampleFile' },
                    { extend: 'pdf', title: 'ExampleFile' },

                    {
                        extend: 'print',
                        customize: function (win) {
                            $(win.document.body).addClass('white-bg');
                            $(win.document.body).css('font-size', '10px');

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

                ],
           
                dom: '<"html5buttons"B>lTfgitp',
            
                "columns": [
                     { "data": "OrderNo" },
                      { "data": "CustomerName" },
                      { "data": "CustomerPhone" },                
                        { "data": "OrderDate" },

                       {
                           "data": "SalesId", "width": "50px", "render": function (item, SalesId) { return "Edit"; }

                       },
                   {
                       "data": "SalesId", "width": "50px", "render": function (data) { return "Delete"; }
                   },
                ],
                "createdRow": function ( row, data, index ) {
                    $compile(row)($scope);  //add this to compile the DOM
                },

                "ajax": {
                    "url": "/Home/GetAllSales",
                    "type": "GET",
                    "dataSrc": "[]",

                }
            });
        }

        bindDatatable();
    }]);
}).call(angular);

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vishal Joshi3y ago
Accepted answer
Hello

The code looks good with the help of $compile jquery data table columns render events will be bound to angular functions.

There is duplicate of below code.
```
"createdRow": function ( row, data, index ) {
  $compile(row)($scope);  //add this to compile the DOM
},
```
it should be only indise juqery data table

i.e. inside $("#dataTable15").DataTable({ }}

So just remove duplicate code and it should work fine.
Thanks
Emmmanuel FIADUFE3y ago
Thank you Vishal and Paul for your swift response,

I did as Vishal said and is working, thank you all guys
Tuhin Paul3y ago
The issue is with the commented out code block that was responsible for getting the data to be displayed in the DataTable. To fix this, you can try modifying the GetAllSales function to return the data in the required format for DataTables to display it properly.

Emmmanuel FIADUFE3y ago