Cómo enlazar datos usando angular js y datatable con fila y columna adicionales

Solución:

Puede seguir la respuesta de davidkonrad en el comentario como en la siguiente estructura:

HTML:

<table id="entry-grid" datatable="ng" class="table table-hover">
            <thead>
                <tr>
                    <th>
                        CustomerId
                    </th>
                    <th>Company Name </th>
                    <th>Contact Name</th>
                    <th>
                        Phone
                    </th>
                    <th>
                        City
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="c in Customers">
                    <td>{{c.CustomerID}}</td>
                    <td>{{c.CompanyName}}</td>
                    <td>{{c.ContactName}}</td>
                    <td>{{c.Phone}}</td>
                    <td>{{c.City}}</td>
                </tr>
            </tbody>
        </table>

Crea un controlador en angular como este:

var app = angular.module('MyApp1', ['datatables']);
app.controller('homeCtrl', ['$scope', 'HomeService',
    function ($scope, homeService) {

        $scope.GetCustomers = function () {
            homeService.GetCustomers()
                .then(
                function (response) {
                    debugger;
                    $scope.Customers = response.data;
                });
        }

        $scope.GetCustomers();
    }])

Servicio:

app.service('HomeService', ["$http", "$q", function ($http, $q) {

    this.GetCustomers = function () {
        debugger;
        var request = $http({
            method: "Get",
            url: "/home/getdata"
        });
        return request;
    }
}]);

Instruya a angular-dataTables para usar la “forma angular” por datatable="ng" :

<table id="entry-grid" 
   datatable="ng" 
   dt-options="dtOptions" 
   dt-columns="dtColumns" 
   class="table table-hover">
</table> 

Entonces cambia dtColumns para abordar índices de columna en lugar de entradas JSON:

$scope.dtColumns = [
   DTColumnBuilder.newColumn(0).withTitle('').withOption('width', '2%'),
   DTColumnBuilder.newColumn(1).withTitle('User Name'),
   DTColumnBuilder.newColumn(2).withTitle('Email'),
   DTColumnBuilder.newColumn(3).withTitle('LoginID'),
   DTColumnBuilder.newColumn(4).withTitle('Location Name'),
   DTColumnBuilder.newColumn(5).withTitle('Role Name'),
   DTColumnBuilder.newColumn(6).withTitle('Active').withOption('width', '7%') 
];

Puedes saltarte el <thead> sección por completo si hace lo anterior. Finalmente reduciría los dos últimos redundantes <td>a uno:

<td class="center-text">
  <span ng-show="user.IsActive == true" class="icon-check2"></span>
  <span ng-show="user.IsActive == false" class="icon-close"></span>
</td>

---

---

Utiliza Nuestro Buscador