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
2 Answers
Answers 1
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; } }]); Answers 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> 
0 comments:
Post a Comment