0

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

Improve this question
8
  • 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, 2014 at 7:20
  • @SamuelDeRycke : It works in html but not in visualforce page
    – user3332076
    Nov 15, 2014 at 7:26
  • @SamuelDeRycke: I dono what I ve to modify
    – user3332076
    Nov 15, 2014 at 7: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, 2014 at 7:43
  • @SamuelDeRycke I dono how to debug js console
    – user3332076
    Nov 15, 2014 at 7:48

1 Answer 1

Reset to default
1

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.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .