1 vue实现分页组件
paginate组件
<template>
<div class="pagination-wrap" v-cloak v-if="totalPage!=0">
<ul class="pagination">
<li :class="currentPage==1?'disabled':''"><a href="javascript:;" @click="turnToPage(1,pageInfo.pagesize)">首页</a></li>
<li :class="currentPage==1?'disabled':''"><a @click="turnToPage(currentPage-1,pageInfo.pagesize)" href="javascript:;">上一页</a></li>
<li><a href="javascript:;" @click="turnToPage(currentPage-2,pageInfo.pagesize)" v-text="currentPage-2" v-if="currentPage-2>0"></a></li>
<li><a href="javascript:;" @click="turnToPage(currentPage-1,pageInfo.pagesize)" v-text="currentPage-1" v-if="currentPage-1>0"></a></li>
<li class="active"><a href="javascript:;" @click="turnToPage(currentPage,pageInfo.pagesize)" v-text="currentPage">3</a></li>
<li><a href="javascript:;" @click="turnToPage(currentPage+1,pageInfo.pagesize)" v-text="currentPage+1" v-if="currentPage+1<=totalPage"></a></li>
<li><a href="javascript:;" @click="turnToPage(currentPage+2,pageInfo.pagesize)" v-text="currentPage+2" v-if="currentPage+2<=totalPage"></a></li>
<li :class="currentPage==totalPage?'disabled':''"><a href="javascript:;" @click="turnToPage(currentPage+1,pageInfo.pagesize)" >下一页</a></li>
<li :class="currentPage==totalPage?'disabled':''"><a href="javascript:;" @click="turnToPage(totalPage,pageInfo.pagesize)">尾页</a></li>
<li class="curPagesize">
<select v-model="pageInfo.pagesize">
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
</li>
</ul>
<small class="small nowrap"> 当前第 <span class="text-primary" v-text="currentPage"></span> 页，共有 <span class="text-primary" v-text="totalPage"></span> 页</small>
<div class="go">
<div :class="isPageNumberError?'input-group error':'input-group'">
<input class="form-control" type="number" min="1" max="totalPage" v-model="goToPage"><a href="javascript:;" class="input-group-addon" @click="turnToPage(goToPage,pageInfo.pagesize)">Go</a>
</div>
</div>
</div>
</template> <script type="text/javascript">
export default {
props: {
//传入总条数，默认0，可以对传入的值进行自定义的验证，具体方式如下
total: {
type: Number,
default: 0,
validator(value) {
return value >= 0
}
},
//传入每页的条数，默认为10
currentPagesize:{
type: Number,
default: 10,
validator(value) {
return value >= 0
}
},
//传入当前页码，默认为1
fatherCurrentPage:{
type: Number,
default: 1,
validator(value) {
return value >= 0
}
}
},
data(){
return {
isPageNumberError: false,
goToPage:'',
totalPage:'',
childCurrentPage:this.fatherCurrentPage,
pageInfo:{
pagesize:this.currentPagesize,
pageNum:this.fatherCurrentPage
}
}
},
computed:{
// prop不应该在组件内部做改变
// 所以我们这里设置一个内部计算属性currentPage来代替props中的myCurrentPage
currentPage(){
return this.childCurrentPage;
},
pagesizeCp(){
return this.pageInfo.pagesize
}
},
created:function(){
this.totalPage = Math.ceil(this.total/this.pageInfo.pagesize);
},
watch:{
pagesizeCp:function(curVal,oldVal){
console.log("new:"+curVal+",old:"+oldVal);
this.childCurrentPage = Math.ceil(this.childCurrentPage*oldVal/curVal);
this.totalPage = Math.ceil(this.total/curVal);
if(this.childCurrentPage > this.totalPage){
this.childCurrentPage = this.totalPage;
}
this.turnToPage(this.pageInfo.pageNum,this.pageInfo.pagesize);
} },
methods:{
//turnToPage为跳转到某页
//传入参数pageNum为要跳转的页数，pagesize为每页多少条信息
turnToPage( pageNum ,pagesize){
var _self = this;
var pageNum = parseInt(pageNum);
var pagesize = parseInt(pagesize);
//页数不合法则退出
if (!pageNum || pageNum > _self.totalPage || pageNum < 1) {
// console.log('页码输入有误！');
_self.isPageNumberError = true;
return false;
}else{
_self.isPageNumberError = false;
}
//更新当前页
_self.childCurrentPage = pageNum;
//数据变化时将页码信息传回给父组件
this.pageInfo.pageNum = pageNum;
this.pageInfo.pagesize =pagesize;
// 将最终获取到的页码信息传递个父组件的getInfo函数
this.$emit('getInfo',this.pageInfo);
}
}
}
</script> <style type="text/css">
.pagination-wrap{
margin: 0 auto;
}
.pagination {
display: inline-block;
padding-left: 0;
border-radius: 4px;
}
.small {
margin: 0 10px;
position: relative;
}
.nowrap {
white-space: nowrap;
}
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
.input-group-addon {
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #555;
text-align: center;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 0 4px 4px 0;
} .input-group-addon, .input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon, .input-group-btn, .input-group .form-control {
box-sizing: border-box;
display: table-cell;
}
.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child>.btn-group:not(:last-child)>.btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group-addon, .input-group-btn, .input-group .form-control {
display: table-cell;
}
.input-group .form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
.go .error .form-control{
border: 1px solid #d95656;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.text-primary {
color: #428bca;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.go {
display: inline-block;
max-width: 120px;
top: 16px;
position: relative;
}
.input-group-addon:last-child {
display: table-cell;
text-decoration: none;
border-left: 0;
}
.pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
color: #777;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd;
}
.pagination>li:last-child>a, .pagination>li:last-child>span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
z-index: 2;
color: #fff;
cursor: default;
background-color: #428bca;
border-color: #428bca;
}
.pagination>li>a, .pagination>li>span{
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #428bca;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
.curPagesize{
width:42px;
color:blue;
margin-left:5px;
}
.pagination>li>select{
width:50px;
height:33px !important;
line-height:31px;
padding:0 5px;
margin-bottom:6px;
border-color: #ddd;
border-radius:5px; }
.pagination>li {
display: inline;
}
</style>
在父组件中进行引用
<template>
<div id = "outletapp">
<div class="data-body">
<paginate :total='parentTotal' :currentPagesize="parentPagesize" :fatherCurrentPage="parentCurrentPage" @getInfo="getPageInfo"></paginate>
</div>
</div>
</template>
<script>
//引入需要的组件
import paginate from '../components/paginate.vue'
var vm = {
name:'**',
data:function(){
return {
parentTotal:0,
parentCurrentPage:1,
parentPagesize:10,
queryParams:{
otherParams:'',
pagesize:10,
pageNum:1
}
}
},
watch:{
queryParams:{
handler:function(newVal,oldVal){
this.parentCallback(newVal);
},
deep:true
}
},
methods:{
querySearch:function(){
console.log('search');
},
// 更新pageNum和pagesize重新渲染页面
parentCallback:function(objParams){
// 此处为获取的参数信息，包括查询信息和页码信息,可以根据这些参数信息进行请求数据
console.log(objParams);
// this.$http.post('url地址',objParams,{emulateJSON:true}).then(function(res){
var res= jsontest2;
this.parentTotal = parseInt(res.total);
},function(res){
var tem = JSON.parse(res.bodyText);
alert(tem.desc);
})
},
getPageInfo:function(obj){
this.queryParams.pagesize = obj.pagesize;
this.queryParams.pageNum = obj.pageNum;
// parentCallback(this.queryParams);
}
},
beforeCreate:function(){
// 初始化请求一下数据
var res= jsontest2;
var tem = res;
this.itemList = tem.rows;
this.parentTotal = parseInt(tem.total);
},
created:function(){
var _self = this;
_self.parentCallback(_self.queryParams);
},
components:{
paginate
}
}
export default vm
</script>
<style>
</style>
angularjs实现分页指令
.directive('paginate', ['$http', function($http){
return {
scope: {
query: '&',
params: '=',
result: '=',
page: '=',
loading: '='
},
restrict: 'E',
template: [
'<div style="margin-bottom: 40px;margin-left: 20px; margin-top: 20px;" ng-cloak>',
'<button ng-click="go(1)" class="p-btn p-btn-active margin_r10">首页</button>',
'<button ng-click="pre()" title="上一页" class="p-btn p-btn-active margin_r10"><<</button>',
'<button class="p-btn margin_r10" title="{{code}}" ng-click="go(code)" ng-class="{\'p-btn-active\': code == params.pageNum}" ng-repeat="code in codes">{{code}}</button>',
'<button ng-click="next()" title="下一页" class="p-btn p-btn-active margin_r10">>></button>',
'<input type="number" ng-model="goPage" min=1 max="{{pageCount}}" style="height: 24px;width: 50px;text-align: center;" />',
'<button class="p-btn p-btn-active margin_r10" title="跳转至" ng-click="go()">Go</button>',
'<span>共 {{pageCount}} 页， </span>',
'<span>共 {{result.total}} 条记录</span>',
'</div>'
].join(''),
link: function($scope, iElm, iAttrs) {
$scope.codeNum = 5
$scope.codes = []
$scope.$watch('result', function() {
$scope.pageCount = getPageCount($scope.result.total, $scope.params.pageSize)
$scope.codes = getCodes($scope.pageCount, parseInt($scope.params.pageNum) ,$scope.codeNum)
})
// 计算总页数
function getPageCount(total, pageSize) {
var a = total%pageSize
if(a == 0) {
return parseInt(total/pageSize)
} else {
return parseInt(total/pageSize) + 1
}
}
// 计算页码显示
function getCodes(pageCount, index, codeNum){
if(pageCount <= codeNum) {
return getArray(1, pageCount)
} else {
if(index <= (codeNum + 1)/2) {
return getArray(1, codeNum)
}
if(index >= (pageCount- (codeNum - 1)/2)) {
return getArray(pageCount-codeNum+1, pageCount)
}
return getArray(index-(codeNum - 1)/2, index+(codeNum - 1)/2)
}
}
function getArray(start, end) {
var arr = []
for (var i = start; i <= end; i++) {
arr.push(i)
}
return arr
}
$scope.go = function(goPage) {
if(!goPage) {
if($scope.goPage)
goPage = $scope.goPage
}
if(goPage == $scope.params.pageNum) {
return
}
if(goPage == '0' || !goPage || goPage > $scope.pageCount || goPage < 0) {
return
} else {
$scope.page.index = goPage
}
$scope.query()
}
$scope.pre = function() {
if($scope.params.pageNum < 2) {
return
} else {
$scope.page.index = $scope.params.pageNum -1
}
$scope.query()
}
$scope.next = function() {
if($scope.pageCount == 0){
return
}
if($scope.params.pageNum == $scope.pageCount) {
return
} else {
$scope.page.index = $scope.params.pageNum + 1
}
$scope.query()
}
}
};
}])
引用时将对应的改指令文件引入，在html里面写入
<paginate params="queryParams" result="queryResult" query="query()" page="paginate"></paginate>
对应的样式设置
.p-btn {
border: none;
cursor: pointer;
color: #333;
padding: 6px 14px;
font-size: 12px;
display: inline;
background: #fff;
border: solid 1px #30363e;
height:30px;
}
.p-btn:hover {
background-color: rgba(63, 74, 89, 0.5);
}
.p-btn-active {
background-color: #3f4a59;
color: #fff;
}