问题描述:
使用angularjs集成footable,通过ajax加载数据后,页面分页及样式没有刷新。
现象:
<table class="table m-b-none" ui-jq="footable" data-filter="#filter" data-page-size="5"> <thead> <tr> <th data-toggle="true">Name</th> <th data-hide="phone">logo</th> <th data-hide="phone,tablet">Website</th> <th data-hide="phone,tablet" data-name="Friendly URL">URL</th> <th data-hide="all">External Parameter 1</th> <th data-hide="all">External Parameter 2</th> <th data-hide="all">Meta Keywords</th> <th data-hide="all">Meta Description</th> <th data-hide="all">Period</th> <th>Action</th> </tr> </thead> <tbody> <tr ng-repeat="store in stores"> <td>{{store.name}}</td> <td><img ng-src="{{store.logo}}" /></td> <td>{{store.website}}</td> <td>{{store.friendly_url}}</td> <td>{{store.external_parameter1}}</td> <td>{{store.external_parameter2}}</td> <td>{{store.Meta_keywords}}</td> <td>{{store.Meta_description}}</td> <td>{{store.period}}</td> <td data-value="1"> <!--Edit Button--> <a type="button" class="btn btn-xs btn-default" ui-sref="app.store.edit({editId: store.id})"> <i class="fa fa-pencil"></i> </a> <!--Delete Button--> <a type="button" class="btn btn-xs btn-default" ng-click="deleteStore(store.id)"> <i class="fa fa-trash"></i> </a> </td> </tr> </tbody> <tfoot class="hide-if-no-paging"> <tr> <td colspan="10" class="text-center"> <ul class="pagination"></ul> </td> </tr> </tfoot> </table>
正常样式应该如:
但偶尔会出现这样情况:
angularjs相关代码如下:
app.controller('storesCtrl',['$scope','$http',function($scope,$http) { $scope.stores = {}; $http.get("http://MyApiUrl/store.PHP"). success(function(data){ $scope.stores = data; //$('.table').trigger('footable_redraw'); }); }]);
解决方案:
success(function(data){ $scope.stores = data; $timeout(function(){ $('.table').trigger('footable_redraw'); },100); });