基于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 相关文章推荐
XmlUtils JS操作XML工具类
Oct 01 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 Javascript
vue如何使用async、await实现同步请求
Dec 09 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框架Phpbean说明
2008/01/10 PHP
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
Python程序退出方式小结
2017/12/09 Python
Python温度转换实例分析
2018/01/17 Python
python 显示数组全部元素的方法
2018/04/19 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
python 画函数曲线示例
2019/12/04 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
如何利用find命令查找文件
2016/11/18 面试题
女方婚礼新郎答谢词
2014/01/11 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python