Autolycus Autolycus - 1 year ago 346
AngularJS Question

angular smart table not working

I am using smart table and I am trying to follow pipe/ajax plugin example. But its not showing any data. this is what I have in my html

<div ng-controller="AboutCtrl">
<table class="table" st-pipe="mc.callServer" st-table="mc.displayed">
<th st-sort="id">id</th>
<th st-sort="name">name</th>
<th st-sort="age">age</th>
<th st-sort="saved">saved people</th>
<th><input st-search="id"/></th>
<th><input st-search="name"/></th>
<th><input st-search="age"/></th>
<th><input st-search="saved"/></th>
<tbody ng-show="!mc.isLoading">
<tr ng-repeat="row in mc.displayed">
<tbody ng-show="mc.isLoading">
<td colspan="4" class="text-center">Loading ... </td>
<td class="text-center" st-pagination="" st-items-by-page="10" colspan="4">


and here is my js

.controller('AboutCtrl', ['Resource', function (service) {

var ctrl = this;

this.displayed = [];

this.callServer = function callServer(tableState) {

ctrl.isLoading = true;

var pagination = tableState.pagination;

var start = pagination.start || 0; // This is NOT the page number, but the index of item in the list that you want to use to display the table.
var number = pagination.number || 10; // Number of entries showed per page.

service.getPage(start, number, tableState).then(function (result) {
ctrl.displayed =;
tableState.pagination.numberOfPages = result.numberOfPages;//set the number of pages so the pagination can update
ctrl.isLoading = false;

}]).factory('Resource', ['$q', '$filter', '$timeout', function ($q, $filter, $timeout) {

//this would be the service to call your server, a standard bridge between your model an $http

// the database (normally on your server)
var randomsItems = [];

function createRandomItem(id) {
var heroes = ['Batman', 'Superman', 'Robin', 'Thor', 'Hulk', 'Niki Larson', 'Stark', 'Bob Leponge'];
return {
id: id,
name: heroes[Math.floor(Math.random() * 7)],
age: Math.floor(Math.random() * 1000),
saved: Math.floor(Math.random() * 10000)


for (var i = 0; i < 1000; i++) {

//fake call to the server, normally this service would serialize table state to send it to the server (with query parameters for example) and parse the response
//in our case, it actually performs the logic which would happened in the server
function getPage(start, number, params) {

var deferred = $q.defer();

var filtered = ? $filter('filter')(randomsItems, : randomsItems;

if (params.sort.predicate) {
filtered = $filter('orderBy')(filtered, params.sort.predicate, params.sort.reverse);

var result = filtered.slice(start, start + number);

$timeout(function () {
//note, the server passes the information about the data set size
data: result,
numberOfPages: Math.ceil(filtered.length / number)
}, 1500);

return deferred.promise;

return {
getPage: getPage


and this is what my browser show

enter image description here

Answer Source

Try change this

<div ng-controller="AboutCtrl">


<div ng-controller="AboutCtrl as mc">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download