基于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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
Dom 结点创建 基础知识
Oct 01 Javascript
模拟select的代码
Oct 19 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 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实现excel文件读写的方法分析
2018/04/25 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
js数组操作学习总结
2013/11/04 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
js密码强度检测
2016/01/07 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python提示No module named images的解决方法
2014/09/29 Python
python求crc32值的方法
2014/10/05 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
python怎么提高计算速度
2020/06/11 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
资深生产主管自我评价
2013/09/22 职场文书
班组长岗位职责
2014/03/03 职场文书
2014年创卫工作总结
2014/11/24 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
自书遗嘱范文
2015/08/07 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书