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

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

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

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

html

  

  

  

  

  

  
...
  

  
[{{i}}]
  
...
  

  

  

  

  

  
 

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;就可以了。从代码到描述都很简陋，还请大家对我的错误不足进行指正。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。