在做的页面结合了不少插件,其中就有footable表格。在使用时出现一些问题,希望大神们指教一下。
首先,设置了data-page-size="5",但是时灵时不灵,有时分页会出现,有时一下就全出来了。
另外,使用了angularjs,在表格数据变化后,使用$scope.$apply;更新了数据,但是数据更新了,页面的分页却错乱了:一页把所有数据都加载出来,下面的页脚依然是之前页面的页脚。
哪位大神了解或者遇到过相似情况,还求告知下,感激不尽》
表格代码
<table id="table" class="table m-b-none" ui-jq="footable" data-filter="#filter" data-paging="true" data-page-size="5" >
<thead>
<tr>
<th data-sort-ignore="true"><input type="checkbox" id="checkall" name="checkall" ng-click="checkall()"/></th>
<th ng-hide="true">id</th>
<th data-hide="">编号</th>
<th data-hide="">spId</th>
<th data-hide="">标题</th>
<th data-sort-ignore="true">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="urllist in list">
<td><input type="checkbox" id="{{urllist.id}}" name="checkone" /></td>
<td ng-hide="true">{{urllist.id}}</td>
<td>{{ $index + 1 }}</td>
<td>{{urllist.spId}}</td>
<td>{{urllist.title}}</td>
<td><!--编辑-->
<a type="button" class="btn btn-xs btn-default m-r-sm" data-toggle="modal" data-target="#myModal"
ng-click="openeditor(urllist.id,urllist.spId,urllist.type,urllist.title,urllist.folder,urllist.httpPath,urllist.outerIp,urllist.innerIp)">
<i class="fa fa-pencil"></i>
</a>
<!--删除-->
<a type="button" class="btn btn-xs btn-default" ng-click="deleteurl(urllist.id)">
<i class="fa fa-trash"></i>
</a>
</td>
</tr>
</tbody>
<tfoot class="hide-if-no-paging">
<tr>
<td colspan="6" class="text-center">
<ul class="pagination" ></ul>
</td>
</tr>
</tfoot>
</table>
success(function(data){
$scope.stores = data;
$timeout(function(){
$('.table').trigger('footable_redraw');
}, 100);
});
给后来者照个亮
哪位大神能告知下footable的更新表方法,在网上找到$("#table").footable();并不能实现表的刷新
找到更新方法$('#table').trigger('footable_initialized'); 但是在js代码里执行了,却没有效果,在Console里面执行,页面却正常刷新,这是什么原因呢?
js代码:
app.controller('FileurlListCtrl', ['$scope', '$http', '$log', function($scope, $http, $log) {
$scope.num = 1;
$scope.listUrl = 'api/storage/v1/select/';
$scope.list = [];
$scope.title="";
$scope.content = {};
$scope.fetchlist = function () {
if($scope.title==null)$scope.title="";
$http({
method: 'GET',
url: $scope.listUrl+$scope.title
}).success(function (data) {
$scope.list = data;
$scope.$apply;
//刷新表
$('#table').trigger('footable_initialized');
}).error(function (data, status, headers, config) {
});
};
$scope.fetchlist();
}]);
没有人一起讨论下吗?虽然我用其他方法把问题解决了,但我还是希望可以知道出现这样问题的原因是什么
我tbody初始没有数据,是通过ajax获取数据填充后,调用footable(),显示正常,
当我重新ajax请求数据更新表时碰到了和楼主一样的问题,数据变动,一页把所有数据都加载出来,下面的页脚依然是之前页面的页脚,其他页没有数据
我用了楼主的方法,调用$('#table').trigger('footable_initialized');但是在调用这个方法之前需要先调用footable(),所以我加载页面时调用了这个方法
$(function () {
$("#table").footable();
})
然后可以了,谢谢楼主分享!
不知道这个方法对你有没有用
$('.table').trigger('footable_redraw');这句是重点,每次加载最后带上这句就不会出现第一次加载正常后来加载错误的情况了。