微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

关于footable不自动分页及不自动刷新页面样式问题

问题描述:

使用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>

正常样式应该如:

但偶尔会出现这样情况:

<td>标签及样式均没有渲染,分页功能也丢失。

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);
});

以上$timeout代码段加入到controller后,问题解决

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐