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

Eleph

can you pls add controller and directive code to throw some light on your code – Nim

@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. – Eleph

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

Serena

Ohhhh great to see you sir again let me see if it is working or not! – Eleph

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. – Eleph

You are welcome dear and davidkonrad's answer is also acceptable didn't check in detail but should work. – Serena

Sir need little help can you please tell me how to set first or any column not as sortable? – Eleph

Use this link for your requirement – Serena

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>

Ruminate

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. – Eleph

@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! – Ruminate

Use dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers') etc i.e skipwithOption('ajax') completely, and I am sure it will work. – Ruminate

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? – Eleph

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. – Eleph

@padhiyar, just do it as you would render a list of items from a resource, from an array of objects or similar, without using angular dataTables. Just use ng-repeat without worrying about dataTables. AD will wait and go in action each time you rerender the table. See example here -> l-lin.github.io/angular-datatables/archives/#!/… hope it helps. – Ruminate

No sir actually the application is on live now I can't change anything I did using different method as of now but I will try this tomorrow by making some demo and get back to you sir asap. I just tried once and it actually bind the data but sorting and searching still not running at that time so I put that thing on hold as of now and will do it tomorrow. Thanks – Eleph

Sorry for late reply sir the site was live so I coudn't change anything now I have rights to modify and I recently check your code it's some how running but not search sort and filter functionality run in my code sir. as given in the link – Eleph

What I mean is if I set static table with tr and td with values it's working for that that hard coded data but when I set the data using ng-repeat it's not filter sort and search as well. – Eleph

thanks for all the help and give your precious time on this thank you so much. – Eleph