up vote 1 down vote favorite
3

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

share|improve this question

This question has an open bounty worth +50 reputation from padhiyar ending tomorrow.

The question is widely applicable to a large audience. A detailed canonical answer is required to address all the concerns.

Already found the solutions but don't know how to implement properly.
    
can you pls add controller and directive code to throw some light on your code – Samuel J Mathew Apr 1 at 5:58
    
@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. – padhiyar Apr 1 at 7:27
up vote 1 down vote accepted

You can use as davidkonrad suggest the link in the comment just like below 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;
    }
}]);
share|improve this answer
    
Ohhhh great to see you sir again let me see if it is working or not! – padhiyar Apr 21 at 8:52
    
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. – padhiyar Apr 21 at 9:06
1  
You are welcome dear and davidkonrad's answer is also acceptable didn't check in detail but should work. – 0MV1 Apr 21 at 9:08
    
Sir need little help can you please tell me how to set first or any column not as sortable? – padhiyar Apr 21 at 9:15
    
Use this link for your requirement – 0MV1 Apr 21 at 9:15
up vote 2 down vote

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>
share|improve this answer
    
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. – padhiyar Apr 3 at 6:13
    
@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 Apr 3 at 6:26
    
Use dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbe‌​rs') etc i.e skipwithOption('ajax') completely, and I am sure it will work. – davidkonrad Apr 3 at 6:31
    
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? – padhiyar Apr 3 at 6:46
    
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. – padhiyar Apr 3 at 6:58

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.