基于vue.js实现分页查询功能


Posted in Javascript onDecember 29, 2018

利用vue.js实现数据库分页,供大家参考,具体内容如下

最新项目有一个分页功能,画面风格很简朴给的样图就用【1】表示页码了, 因此,我没有上网上找插件,自己简单的做了一个。作为菜鸟,代码可能有点青涩,请见谅。  

 基于vue.js实现分页查询功能

除了vue我还引用了Bootstrap的类和图标

html

<div class="paging">
  <ul class="pagination" style="margin: 13px">
  <li class="page-li" v-if="page>1"><a href="javascript:void(0);" @click="firstpg()" style="border: 0px;"><span class="glyphicon glyphicon-step-backward"></span></a></li>
  <li class="page-li" v-else></li>
  <li class="page-li" v-if="page>1"><a href="javascript:void(0);" @click="up()" style="border: 0px;"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
  <li class="page-li" v-else></li>
  <li class="page-li" v-if="showup>0"><a href="javascript:void(0);" @click="showmore1()" style="border: 0px;">...</a></li>
  <li class="page-li" v-else></li>
  <li v-for="i in pages" v-if="i>showup&&i<showdown"><a href="javascript:void(0);" @click="setpage(i)" :class="{colorred:i==page}" style="border: 0px;">[{{i}}]</a></li>
  <li class="page-li" v-if="showdown<=pages"><a href="javascript:void(0);" @click="showmore2()" style="border: 0px;">...</a></li>
  <li class="page-li" v-else></li>
  <li class="page-li" v-if="page<pages"><a href="javascript:void(0);" @click="down()" style="border: 0px;"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
  <li class="page-li" v-else></li>
  <li class="page-li" v-if="page<pages"><a href="javascript:void(0);" @click="lastpg()" style="border: 0px;"><span class="glyphicon glyphicon-step-forward"></span></a></li>
  <li class="page-li" v-else></li>
  </ul>
 </div>

js

const listData = { 
initcount : 0, 
//选中的页号 
page : 1, 
//显示页码下限 
showdown : 0, 
//显示页码上限 
showup : 0, 
 }; 
$(function() { 
 new Vue({ 
 el : ‘#manageArea', 
 data : listData, 
 methods : { 
 setpage : setpage, 
 up : up, 
 down : down, 
 firstpg : firstpg, 
 lastpg : lastpg, 
 showmore1 : showmore1, 
 showmore2 : showmore2, 
 }, 
}); 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
}); 
//选中的页号 
function setpage(i) { 
 listData.page = i; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
} 
//向上翻一页 
function up() { 
 if (listData.page > 1) { 
 listData.page = listData.page - 1; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
} 
} 
//向下翻一页 
function down() { 
 if (listData.page < listData.pages) { 
 listData.page = listData.page + 1; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
 } 
} 
//直接到首页 
function firstpg() { 
 if (listData.page > 1) { 
 listData.page = 1; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
 } 
} 
//直接到尾页 
function lastpg() { 
 if (listData.page < listData.pages) { 
 listData.page = listData.pages; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
 } 
} 
//往前翻三页 
function showmore1() { 
 listData.showdown -= 3; 
 listData.showup -= 3; 
} 
//往后翻三页 
function showmore2() { 
 listData.showdown += 3; 
 listData.showup += 3; 
} 
//设置显示的页码下限 
function setShowdown() { 
 listData.showdown = listData.page + 2; 
} 
//设置显示的页码上限 
function setShowup() { 
 listData.showup = listData.page - 2; 
}

这样通过把选中的页码传到后台 计算出 limit 开始条数的值 如显示20条 开始值就是 (page-1)*20;就可以了。从代码到描述都很简陋,还请大家对我的错误不足进行指正。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
小程序日历控件使用方法详解
Dec 29 #Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 #jQuery
小程序自定义日历效果
Dec 29 #Javascript
微信小程序自定义带价格显示日历效果
Dec 29 #Javascript
微信小程序日历效果
Dec 29 #Javascript
微信小程序日历组件使用方法详解
Dec 29 #Javascript
微信小程序自定义可滑动日历界面
Dec 28 #Javascript
You might like
PHP自动更新新闻DIY
2006/10/09 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
简明 Python 基础学习教程
2007/02/08 Python
Python subprocess模块学习总结
2014/03/13 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
python版简单工厂模式
2017/10/16 Python
Python subprocess模块详细解读
2018/01/29 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
python每天定时运行某程序代码
2019/08/16 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
列车长先进事迹材料
2014/01/25 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
公安机关起诉意见书
2015/05/20 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js