I am new to Angular. I am trying to create a table and try to apply sorting as below
My Module Code :
app.js :
(function () {
myModule = angular.module('myAngularApplication', []);
}());
LeadService.js :
angular.module('myAngularApplication').service("LeadService", function ($http) {
this.getAllLeads = function () { return $http.get("/Student/GetLeads"); };
});
StudentController.js :
angular.module('myAngularApplication').controller('StudentController', function ($scope, LeadService) {
$scope.leads = [];
$scope.sortType = 'StudentName';
$scope.sortReverse = false;
$scope.searchFish = '';
GetAllLeads();
function GetAllLeads() {
$scope.leads = LeadService.getAllLeads();
$scope.leads = [
{ ID: 0, StudentName: "Test Books 1", Source: "Test Author 1", Course: "TEST1" },
{ ID: 1, StudentName: "Test Books 2", Source: "Test Author 2", Course: "TEST2" },
{ ID: 2, StudentName: "Test Books 332", Source: "Test Author 3", Course: "TEST3" },
{ ID: 4, StudentName: "Test Books 4", Source: "Test Author 4", Course: "TEST4" },
{ ID: 5, StudentName: "Test Books 5", Source: "Test Author 5", Course: "TEST5" }
];<small><small></small></small>
}
});
My View : (Its an .cshtml page as i am using MVC)
@*<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>*@
<script src="../../libs/angular.min.js" type="text/javascript"></script>
<script src="../../app/app.js" type="text/javascript"></script>
<script src="../../app/Student/LeadService.js" type="text/javascript"></script>
<script src="../../app/Student/StudentController.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../plugins/datatables/dataTables.bootstrap.css">
<div ng-app="myAngularApplication" ng-controller="StudentController">
<section class="content">
<div class="box"><pre lang="text"><pre lang="text">
<div class="box-body">
<table id="example1" class="table table-bordered table-striped" ng-init="GetAllLeads()">
<thead>
<tr>
<th>ID</th>
<th>Student Name</th>
<th>Source</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="lead in leads">
<td>{{lead.ID}}</td>
<td>{{lead.StudentName}}</td>
<td>{{lead.Source}}</td>
<td>{{lead.Course}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div></section>
<script type="text/javascript">
$(function () {
$("#example1").DataTable();
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false
});
});
</script>
This code woks fine (all sorting and filter but when i fetch data from a controller then sorting and Filter does not work.
My Action in Controller is
public JsonResult GetLeads()
{
List<lead> leadList = new List<lead>();
for (int i = 0; i < 3; i++)
{
Lead obj1 = new Lead();
obj1.ID = i;
obj1.StudentName = "Vijay";
obj1.Source = "Source" + i;
obj1.Course = "cource" + i;
leadList.Add(obj1);
}
return Json(leadList.ToArray(), JsonRequestBehavior.AllowGet);
}
and i changed my controller as below
angular.module('myAngularApplication').controller('StudentController', function ($scope, LeadService) {
$scope.leads = [];
$scope.sortType = 'StudentName';
$scope.sortReverse = false;
$scope.searchFish = '';
GetAllLeads();
function GetAllLeads() {
var getData = LeadService.getAllLeads();
getData.then(function (l) {
for (i = 0; i < l.data.length; i++) {
$scope.leads[i] = { ID: l.data[i].ID, StudentName: l.data[i].StudentName, Source: l.data[i].Source, Course: l.data[i].Course }
}
}, function () {
alert('Error in getting records');
});
}
});
Initially it loads data as expected
For Sorting and Filter i am using
<script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../../plugins/datatables/dataTables.bootstrap.min.js"></script>
My Question is this. Why this is working with dummy data and why its not working with actual data (returning from Controller). What i need to change to make this work. This can be a silly question but any help will be appreciate.
What I have tried:
I tried to change the Angular Js version.