angularJs及layui前端进行假分页
当后台数据库不多,没必要进行后台数据库分页时,可能取到的数据在页面上一页也显示不了,所以要在前端的页面上进行一个假分页。
当angularJs的模型和layui的分页 插件结合起来使用时,ui页面中绑定的model数据无法被感知,因此在点击下一页的时候页面的数据并没有更新,即使model里的数据已经更新了。所以在这给大家介绍一下如何处理这种问题。
html代码:
<tbody ng-repeat="arranges in arrangeList">
<tr></tr>
<tbody>
js代码:
layui.use(['laypage'],function(){
var laypage = layui.laypage;
var pageSize = $scope.params.pageSize;
laypage({
cont: 'page',
pages: Math.ceil($scope.allArrangeList.length/pageSize), //得到总页数
skip: true,
jump: function(obj){
$scope.arrangeList = $scope.allArrangeList.concat().splice(obj.curr*pageSize-pageSize, pageSize);
}
});
});
用以上的js代码,在html页面中点击下一页,数据是不会更新的。
正确的js写法代码是:
layui.use(['laypage'],function(){
var laypage = layui.laypage;
var pageSize = $scope.params.pageSize;
laypage({
cont: 'page',
pages: Math.ceil($scope.allDataList.length/pageSize), //得到总页数
skip: true,
jump: function(obj){
$timeout(function(){
$scope.dataList = $scope.allDataList.concat().splice(obj.curr*pageSize-pageSize, pageSize);
},20)
}
});
});
给数据加个延时触发,数据的变化就会被感知得到。