How to bind data using angular js and datatable with extra row and column

Question

Hello I am creating one application using angularjs and ASP.NET MVC with datatable js.

I have implemented table showing data using datatable with angular js by help of this article.

But I want to bind the data using same functionality with column names statically in html like:

In article author has done work using:

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

but I want to do it like this by using above same functionality using ng-repeat as per my data:

<table id="tblusers" class="table table-bordered table-striped table-condensed datatable">
 <thead>
 <tr>
 <th width="2%"></th>
 <th>User Name</th>
 <th>Email</th>
 <th>LoginID</th>
 <th>Location Name</th>
 <th>Role</th>
 <th width="7%" class="center-text">Active</th>
 </tr>
 </thead>
 <tbody>
 <tr ng-repeat="user in Users">
 <td><a href="#" ng-click="DeleteUser(user)"><span class="icon-trash"></span></a></td>
 <td><a class="ahyperlink" href="#" ng-click="EditUser(user)">{{user.UserFirstName}} {{user.UserLastName}}</a></td>
 <td>{{user.UserEmail}}</td>
 <td>{{user.LoginID}}</td>
 <td>{{user.LocationName}}</td>
 <td>{{user.RoleName}}</td>
 <td class="center-text" ng-if="user.IsActive == true"><span class="icon-check2"></span></td>
 <td class="center-text" ng-if="user.IsActive == false"><span class="icon-close"></span></td>
 </tr>
 </tbody>
</table>

I also want to add new column inside the table using the same functionality on button click Add New Record.

Is it possible?

If yes how it can be possible it will be nice and thanks in advance if anyone show me in jsfiddle or any editor.

Please DOWNLOAD source code created in Visual Studio Editor for demo

• SAMUEL: can you pls add controller and directive code to throw some light on your code
• 3 rules: @SamuelJMathew All the code you can see in this article I have the same code no change except the code I have written in the question to bind statically in HTML as example.

Answer 1

You can follow davidkonrad's answer in the comment just like following structure:

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>

Create controller in angular like this:

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();
 }])

Service:

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

• 3 rules: Ohhhh great to see you sir again let me see if it is working or not!
• 3 rules: Yes it's working as expected great sir just one issue it shows two icons for sorting and some design issue is there but it's ok I will sought it out. Thanks as always you helped me again sir thank you so much and thanks to davidkonrad as well.
• Mahavirsinh Padhiyar: You are welcome dear and davidkonrad's answer is also acceptable didn't check in detail but should work.
• 3 rules: Sir need little help can you please tell me how to set first or any column not as sortable?
• Mahavirsinh Padhiyar: Use this link for your requirement

Answer 2

Instruct angular-dataTables to use the "angular way" by datatable="ng" :

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

Then change dtColumns to address column indexes rather than JSON entries:

$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%') 
];

You can skip the <thead> section entirely if you do as above. Finally I would reduce the two last redundant <td>'s to one :

<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>

• 3 rules: I have tried your code but gives me an error in console "Cannot read property 'match' of undefined", please do me a favor sir download this code and can you change at your end and see if it's working sir thanks in advance.
• davidkonrad: @padhiyar, fun to see an angular project with a C# backend :) please delete the comment with the link (for your own sake). Your problem is this -> $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', { url: "/home/getdata", type: "POST" }) You cannot have ajax now you are rendering with angular ng-repeat!
• davidkonrad: Use dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers') etc i.e skipwithOption('ajax') completely, and I am sure it will work.
• 3 rules: I agree with you sir but in my real application I have to call service and get the data using $http call compulsory. so how can I do that by calling without ajax sir?
• 3 rules: Sir you mean to say I don't have to change in table code I have written in HTML right? I have tried but datatable search and sorting functionality is not working data displayed properly but it set the data blank inside the table when I search something or click on sort the data of header.