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

  

vue angular 分别实现分页的更多相关文章

  1. Vue && Angular 双向绑定检测不到对象属性的添加和删除

    由于ES5的限制 Vue  && Angular 双向绑定检测不到对象属性的添加和删除  还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...

  2. django rest_framework vue 实现用户列表分页

    django rest_framework vue 实现用户列表分页 后端 配置urls # 导入view from api.appview.userListView import userListV ...

  3. 关于vue+element-ui项目的分页,返回默认显示第一页的问题解决

    关于vue+element-ui项目的分页,返回默认显示第一页的问题解决     问题描述 当前页面如下: 然后点击页码跳到第3页,然后在第三页点击页面链接跳转到新的页面 然后在新页面点击返回按钮,返 ...

  4. vue修改elementUI的分页组件视图没更新问题

    转: vue修改elementUI的分页组件视图没更新问题 今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页.今天想在methods里面手 ...

  5. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  6. Vue.js的表格分页组件

    转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...

  7. Jenkins gitlab vue,angular,react 自动化构建【原】

    大致思路,(本篇主要讲vue ,当然了 angular react 也是一样配置) ,转发请注明原链接,谢谢 :) 1. 服务器上面配置jenkins (安装配置,不介绍) 2.新建item 自由风格 ...

  8. Angular.js实现分页

    一.编写angularJS实现的分页js(网上搜)和样式表(pagination),并在页面引入 二.编写变量和方法 //分页控件控制 $scope.paginationConf={ currentP ...

  9. 在angular中利用分页插件进行分页

    必需:angular分页js和css  当然还有angular.js   还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...

随机推荐

  1. git的介绍

    1.Git工作区域 2.向仓库中添加文件流程 三.Git初始化及仓库创建和操作 1.Git安装之后需要进行一些基本信息设置 a.设置用户名:git  config -- global  user.na ...

  2. 如何在ASP.NET 网站项目中使用C# 6?

    作者:Generic链接:https://www.zhihu.com/question/48864375/answer/113316462来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业 ...

  3. React.createClass 、React.createElement、Component

    react里面有几个需要区别开的函数 React.createClass .React.createElement.Component 首选看一下在浏览器的下面写法: <div id=" ...

  4. 【转】JsonPath教程

    https://blog.csdn.net/koflance/article/details/63262484 1. 介绍 类似于XPath在xml文档中的定位,JsonPath表达式通常是用来路径检 ...

  5. cocos2dx 游戏plist与png完美切成小图python代码

    首先需要一份python的切图程序: #python2.5 unpack_plist.py birdfly #! /usr/lical/bin/python import os,sys from xm ...

  6. 不同版本Hibernate.获取SessionFactory的方式

    不同版本Hibernate.获取SessionFactory的方式 Hibernate 版本说明: 我当前使用的是 Hibernate 5.x ,(hibernate-release-5.3.6.Fi ...

  7. WebSocket.之.基础入门-断开连接处理

    ebSocket.之.基础入门-断开连接处理 在<WebSocket.之.基础入门-后端响应消息>的代码基础之上,继续更新代码.代码只改动了:TestSocket.java 和 index ...

  8. Bootstrap-全局CSS样式-图片样式

    Bootstrap第二部分:全局CSS样式-图片样式.img-rounded   圆角图片.img-circle    圆形图片.img-thumbnail 缩略图片.img-responsive响应 ...

  9. JSP—连接池

    1:为什么要使用连接池? 解决频繁连接释放造成的资源浪费 2:配置好的数据库连接池也是以数据源DateSource的形式存, 连接池的实现类负责建立与数据库的连接. 3:使用连接池关闭资源的区别? 使 ...

  10. 14. Longest Common Prefix(暴力循环)

    Write a function to find the longest common prefix string amongst an array of strings. If there is n ...