基于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 相关文章推荐
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
ES2020 已定稿,真实场景案例分析
May 25 Javascript
原生js实现弹幕效果
Nov 29 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缓存设计实现代码
2011/09/30 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
smarty模板数学运算示例
2016/12/11 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
重写javascript中window.confirm的行为
2012/10/21 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
python中json格式数据输出的简单实现方法
2016/10/31 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
美术专业学生个人自我评价
2013/09/19 职场文书
英文求职信结束语大全
2013/10/26 职场文书
创新比赛获奖感言
2014/02/13 职场文书
不同意离婚答辩状
2015/05/22 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python