Click here to Skip to main content
14,771,739 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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'; // set the default sort type
    $scope.sortReverse = false;  // set the default sort order
    $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'; // set the default sort type
    $scope.sortReverse = false;  // set the default sort order
    $scope.searchFish = '';
    GetAllLeads();

    function GetAllLeads() {
        var getData = LeadService.getAllLeads();
        getData.then(function (l) {
           // $scope.leads = l.data; // I tried this also
            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.
Posted
Updated 9-Sep-16 4:06am
v2
Comments
David_Wimbley 9-Sep-16 9:07am
   
Just to make sure I understand, are you saying when you click the column headers on the data table it isn't sorting how you thought it would? Not sure if you mean just sorting the data straight from the angular controller.
Anurag Sharma 9-Sep-16 9:35am
   
@vijay

Could you share the JSON returned from the AJAX call?

I would like to compare it with the static value.

Thanks.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900