闲来没事,分享下项目中自己写的分页组件。来不及了,直接上车。
效果:
输入框可任意输入,并会自动提交到该页
依赖项:
fontawesome,bootstrap
html:
rush:xhtml;">
css:
rush:css;">
/* 分页 */
.page {
margin: 15px 0;
padding: 0;
float: right;
}
.page li {
list-style: none;
float: left;
height: 30px;
line-height: 30px;
}
.page li input {
padding: 3px 5px;
height: 100%;
width: 50px;
border: none;
background-color: #EAEEF1;
text-align: center;
margin-right: 10px;
}
.page li span {
margin-right: 15px;
}
.page li a {
text-decoration: none;
outline: none;
margin-right: 15px;
}
directive:
rush:js;">
App.directive('paging',function() { // 分页
return {
restrict: 'A',replace: true,scope: {
totalPage: '=totalPage',currentPage: '=currentPage',getData: '&getData'
},templateUrl: 'app/views/partials/paging.html',controller: function($scope) {
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>tPage = function() { $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.currentPage = 1; }
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.lastPage = function() { $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.currentPage = $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.totalPage; }
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.prePage = function() { $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.currentPage--; }
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.nextPage = function() { $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.currentPage++; }
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$watch('currentPage',function(newVal,oldVal) {
if(newVal != oldVal && newVal) $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.getData();
})
}
};
});
参数:
用法:
controller:
rush:js;">
$scope.current_page = 1; // 当前页
$scope.getData = function() {
$scope.param.page = $scope.current_page;
ConnectApi.start('post','index/student/getschoolclasslist',$scope.param).then(function(response) { // 这个ConnectApi 你大可不必关心,这是我封装的http函数
var data = ConnectApi.data({ res: response,_index: index });
$scope.data = data.data;
$scope.totalpage = data.data.total_page; // 服务器端返回的总页数
}
}
$scope.getData(); // 获取数据的函数
html: