Table in Visualforce page using AngularJs

Question

Can anyone tell me how to create table in Visualforce page using angularJs.
Below code is am trying to implement but it doesnt work

<apex:page >


<html>

  <head>
    <script  src="https://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <script src="https://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>

    <link  rel="stylesheet" href="https://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
    <link  rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />


    <style>
        body {
    padding: 10px !important;   
}

.ng-table tr.emphasis td {
    background-color: #DDD;
    font-weight: bold;
}
    </style>
    <script>
          //defining module

        var app = angular.module('main', ['ngTable']);
        main.controller('DemoCtrl', function($scope, $filter, ngTableParams) {
    var data = [{name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}];

    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 5           // count per page
    }, {
        total: data.length, // length of data
        getData: function($defer, params) {
            // use build-in angular filter
            var orderedData = params.sorting() ?
                    $filter('orderBy')(data, params.orderBy()) :
                    data;

            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });
});
    </script>
  </head>

<body ng-app="main" ng-controller="DemoCtrl">



    <table ng-table="tableParams" class="table">
        <tr ng-repeat="user in $data" >
            <td data-title="'Name'">
                {{user.name}}
            </td>
            <td data-title="'Age'">
                {{user.age}}
            </td>

        </tr>
    </table>

</body>
</html>

</apex:page>

My Expectation Result would be enter image description here

But It gives like enter image description here

I dono whats wrong in my code

Thanks in advance Karthick

Karthick, can you explain what VF's role and impact on your issue has ? If this is purely an AngularJS question, it's not ontopic to this site. Questions which are not specifically related to salesforce related technologies are better asked at stackoverflow.com, there are many more html,javascript,java, angular ,..etc experts there than there are here. — Samuel De Rycke, Nov 15 '14 at 07:20
@SamuelDeRycke : It works in html but not in visualforce page — user3332076, Nov 15 '14 at 07:26
Knowing that it works in pure html but not in VF is relevant information. It's always good to include in your question the step's you've already taken to debug and understand an issue or question. Are there any JS errors visible in your browser JS console ? — Samuel De Rycke, Nov 15 '14 at 07:43
Use inspect element of browser to find the issue .Your error console will show the error if any script issue . — Mohith Shrivastava, Nov 15 '14 at 08:17
You'll need to use all of these techniques How do I start to debug my own Visualforce/JavaScript? to get this working. — Keith C, Nov 15 '14 at 10:14

score 1 · Accepted Answer · edited Apr 13 '17 at 12:54

If you look in the JavaScript console - when working on code like this you must use the techniques described in How do I start to debug my own Visualforce/JavaScript? - you will see these errors:

GET https://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css net::ERR_INSECURE_RESPONSE ang:31
GET https://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js net::ERR_INSECURE_RESPONSE ang:29

letting you know that these files are not being loaded for security reasons because they are not hosted appropriately.

I don't know of a reliable CDN location to load these from, so the simplest thing to do is to manually get hold of them and add them as static resources to your project so your can reference them from Salesforce's servers like this:

<script src="{!$Resource.NgTableJs}"></script>
<link rel="stylesheet" href="{!$Resource.NgTableCss}" />

There is also then the error that this:

var app = angular.module('main', ['ngTable']);

should be this:

var main = angular.module('main', ['ngTable']);

With these two changes the table is rendered.

Note that there are other approaches to client-side paginated and sorted tables in Visualforce, such as adding DataTables to a normal Visualforce table.

Table in Visualforce page using AngularJs

1 Answers1