① javascript vue.js表格分页，ajax异步加载数据
分页一般和表格一起用，分页链接作为表格的一部分，将分页链接封装成一个独立的组件，然后作为子组件嵌入到表格组件中，这样比较合理。
效果：
代码：
1.注册一个组件
js
Vue.component('pagination',{
template:'#paginationTpl',
replace:true,
props:['cur','all','pageNum'],
methods:{
//页码点击事件
btnClick:
function(index){
if(index
!=
this.cur){
this.cur
=
index;
}
}
},
watch:{
"cur"
:
function(val,oldVal)
{
this.$dispatch('page-to',
val);
}
},
computed:{
indexes
:
function(){
var
list
=
[];
//计算左右页码
var
mid
=
parseInt(this.pageNum
/
2);//中间值
var
left
=
Math.max(this.cur
-
mid,1);
var
right
=
Math.max(this.cur
+
this.pageNum
-
mid
-1,this.pageNum);
if
(right
>
this.all
)
{
right
=
this.all}
while
(left
<=
right){
list.push(left);
left
++;
}
return
list;
},
showLast:
function(){
return
this.cur
!=
this.all;
},
showFirst:
function(){
return
this.cur
!=
1;
}
}
});
模板：
<script
type="text/template"
id="paginationTpl">
<nav
v-if="all
>
1">
<ul
class="pagination">
<li
v-if="showFirst"><a
href="javascript:"
@click="cur--">«</a></li>
<li
v-for="index
in
indexes"
:class="{
'active':
cur
==
index}">
<a
@click="btnClick(index)"
href="javascript:">{{
index
}}</a>
</li>
<li
v-if="showLast"><a
@click="cur++"
href="javascript:">»</a></li>
<li><a>共<i>{{all}}</i>页</a></li>
</ul>
</nav>
</script>
HTML：
<div
id='item_list'>
...
<pagination
:cur="1"
:all="pageAll"
:page-num="10"
@page-to="loadList"></pagination>
</div>
当点击分页链接的时候，通过watch
cur，子组件分发
page-to
事件，通过
@page-to="loadList"
标签指定使用父组件
loadList
方法处理事件，父组件接收到page值然后ajax加载数据，根据服务端返回计算并更新自身的
pageAll
值，因为子组件prop通过
:all="pageAll"
动态绑定了父组件的pageAll对象，所以子组件会联动更新。
附上一个简单的表格组件例子:
var
vm
=
new
Vue({
el:
"#item_list",
data:
{
items
:
[],
//分页参数
pageAll:0,
//总页数,根据服务端返回total值计算
perPage:10
//每页数量
},
methods:
{
loadList:function(page){
var
that
=
this;
$.ajax({
url
:
"/getList",
type:"post",
data:{"page":page,"perPage":this.perPage},
dataType:"json",
error:function(){alert('请求列表失败')},
success:function(res){
if
(res.status
==
1)
{
that.items
=
res.data.list;
that.perPage
=
res.data.perPage;
that.pageAll
=
Math.ceil(res.data.total
/
that.perPage);//计算总页数
}
}
});
},
//初始化
init:function(){
this.loadList(1);
}
}
});
vm.init();
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
② 求一段JS按行分页代码 全点（高手快来啊）
这是按标签[NextPage]来分页的，要在哪里分页就在哪里插入[NextPage]这个标签 <body><style>
#Page_index_Button{height:26px;line-height:26px;padding-left:3px;padding-right:3px;padding-top:2px;border:1px solid #999;font-size:12px;margin-right:5px;text-decoration:none;}
#Page_index_Button_Link{font-size:12px;height:26px;line-height:26px;color:#00F;padding-left:3px;padding-right:3px;padding-top:2px;border:1px solid #999;font-size:12px;margin-right:5px;text-decoration:none;clear:both;}
#Page_index_Button_Link a:link,#Page_index_Button_Link a:visited{font-size:12px;height:26px;line-height:26px;color:#00F;font-weight:100;text-decoration:none;}
#Page_index_Button_Link a:hover{font-size:12px;height:26px;line-height:26px;color:#F00;font-weight:100;text-decoration:none;}
#AANext_Page{width:100%;text-align:center;margin:0px auto;clear:both;text-decoration:none;margin-top:20px;}
</style><div id="DisPlay_Content"></div>
<div id="divArticle">
<Content>
大家来试验[NextPage]分页哦~~~~~[NextPage]我分~~~我再[NextPage]分分[NextPage]分分
</Content>
</div>
<script language="javascript">
//每页显示字数
var PageSize=2000;
//分页模式
var flag=2;//1:根据字数自动分页 2:根据[NextPage]分页
//默认页
var startpage = 1;
//导航显示样式 0:常规 1:直接 2:下拉
var TopShowStyle = 1;
var DownShowStyle = 0;
var currentSet,CutFlag,TotalByte,PageCount,key,tempText,tempPage;
var key="";
var currentSet=0;
var Text=document.getElementById("divArticle").innerHTML
document.getElementById("divArticle").style.display="none";
TotalByte=Text.length;
if (flag==1)
{
PageCount=Math.round(TotalByte/PageSize);
if(parseFloat("0."+TotalByte%PageSize)>0){
if(parseFloat("0."+TotalByte%PageSize)<0.5){
PageCount=PageCount+1;
}
}
var PageNum=new Array(PageCount+1);
var PageTitle=new Array(PageCount+1);
PageNum[0]=0;
PageTitle[0]="";
var sDrv1,sDrv2,sDrv3,sDrv4,sFlag;
var sDrvL,sTemL;
var sTem1,sTem2,k;
sFlag=0;
for(j=1;j<PageCount+1;j++){
PageNum[j]=PageNum[j-1]+PageSize;
PageTitle[j]="";
//alert(j);
sDrv1="<br>";
sDrv2="<BR>";
sDrv3="<Br>";
sDrv4="<bR>";
sDrvL=sDrv1.length;
for(k=PageNum[j];k<=TotalByte;k++){
sTem1=Text.substring(PageNum[j]-sDrvL,k);
sTemL=sTem1.length;
sTem2=sTem1.substring(sTemL-sDrvL,sTemL)
if (sTem2==sDrv1 || sTem2==sDrv2 || sTem2==sDrv3 || sTem2==sDrv4)
{
sFlag=sFlag+1;
PageNum[j]=k;
break;
}
}
if (PageNum[j]>TotalByte)
{
break;
}
}
if (j<PageCount)
{
PageNum.length=j;
PageCount=j
}
if (PageCount>1&&sFlag>1&&PageCount<sFlag)
{
PageCount=sFlag+1;
}
}
else{
//手动分页
var j,sFlag,PageCount,sText;
var sTitleFlag;
var PageNum=new Array();
var PageTitle=new Array();
PageSize=0;
j=1;
PageNum[0]=-10;
PageTitle[0]="";
sFlag=0;
sText=Text;
do
{
sText=Text.substring(PageNum[j-1]+10,TotalByte);
sFlag=sText.indexOf("[NextPage");
if (sText.substring(sFlag+9,sFlag+10)=="=")
{
sTitleFlag=sText.indexOf("]",sFlag);
PageTitle[j]=sText.substring(sFlag+10,sTitleFlag);
}
else{
PageTitle[j]="";
}
if (sFlag>0)
{
PageNum[j]=sFlag+PageNum[j-1]+10;
}
else{
PageNum[j]=TotalByte;
}
j+=1;
}
while (PageNum[j-1]<TotalByte);
PageCount=j-1;
}
function text_pagination(Page){
var Output,Byte;
var Output="";
if(Page==null){Page=1;}
//显示正文
if(Page==0) {
//不分页
tempText=Text;
}
else{
//分页
if (flag==1)
//自动分页
{
tempText=Text.substring(PageNum[Page-1],PageNum[Page]);
}
else{
//手动分页
if (PageTitle[Page-1].length==0)
{
tempText=Text.substring(PageNum[Page-1]+10,PageNum[Page]);
}
else{
tempText=Text.substring(PageNum[Page-1]+11+PageTitle[Page-1].length,PageNum[Page]);
}
}
}
Output=Output+tempText;
Output=Output+"<div id=AANext_Page>";
Output=Output+Article_PageNav(DownShowStyle,Page);
Output=Output+"</div>"; document.getElementById("DisPlay_Content").innerHTML = Output;
if (Page>1)
{document.location.href='#';}
}
function Article_PageNav(ShowStyle,Page){
//分页码显示函数
//参数为调用样式，0=简单样式，1=标准样式
var temp="";
if (ShowStyle==0 && PageCount>1)
//简单样式
{
tempPage=Page;
if(TotalByte>PageSize){
if (Page-4<=1){
temp=temp+"<font id=Page_index_Button color=#999999>首页</font>";
if (Page<=1){temp=temp+"<font id=Page_index_Button color=#999999>上一页</font>";}else{temp=temp+"<font id=Page_index_Button_Link style='text-decoration:none;'><a href=javascript:text_pagination("+(Page-1)+")>上一页</a></font>";}
if (PageCount>10){
for(i=1;i<8;i++){
if (i==Page){
temp=temp+" <font color=red>"+i+"</font> ";
}else{
temp=temp+" <a href=javascript:text_pagination("+i+")>"+i+"</a>"+" ";
}
}
temp=temp+" ...";
}
else{
for(i=1;i<PageCount+1;i++){
if (i==Page){
temp=temp+" <font color=red>"+i+"</font> ";
}
else{
temp=temp+" <a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
}
}
}
if (Page==PageCount){temp=temp+"<font id=Page_index_Button color=#999999>下一页</font>";}else{temp=temp+"<font id=Page_index_Button_Link><a href=javascript:text_pagination("+(Page+1)+")>下一页</a></font>";}
if(PageCount<10){temp=temp+"<font id=Page_index_Button color=#999999>末页</font>";}else{temp=temp+"<font id=Page_index_Button_Link><a href=javascript:text_pagination("+PageCount+")>末页</a></font>";}
}
else if(Page+4<=PageCount){
temp=temp+"<font id=Page_index_Button_Link><a href=javascript:text_pagination(1)>首页</a></font>";
temp=temp+"<font id=Page_index_Button_Link><a href=javascript:text_pagination("+(Page-1)+")>上一页</a></font>";
if (PageCount>10){
temp=temp+"..";
for(i=Page-4;i<Page+4;i++){
if (i==Page){
temp=temp+" <font color=red>"+i+"</font> ";
}
else{
temp=temp+" <a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
}
}
temp=temp+" ..";
}
else{
for(i=1;i<PageCount+1;i++){
if (i==Page){
temp=temp+" <font color=red>"+i+"</font> ";
}
else{
temp=temp+" <a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
}
}
}
if (Page==PageCount){temp=temp+"<font id=Page_index_Button color=#999999>下一页</font>";}else{temp=temp+"<font id=Page_index_Button_Link><a href=javascript:text_pagination("+(Page+1)+")>下一页</a></font>";}
temp=temp+"<font id=Page_index_Button_Link><a href=javascript:text_pagination("+PageCount+")>末页</a></font>";
}
else{
temp=temp+"<font id=Page_index_Button_Link><a href=javascript:text_pagination(1)>首页</a></font>";
temp=temp+"<font id=Page_index_Button_Link><a href=javascript:text_pagination("+(Page-1)+")>上一页</a></font>";
temp=temp+".."
for(i=Page-2;i<PageCount+1;i++){
if (i==Page){
temp=temp+" <font color=red>"+i+"</font> ";
}
else{
temp=temp+" <a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
}
}
if (Page==PageCount){temp=temp+"<font id=Page_index_Button color=#999999>下一页</font>";}else{temp=temp+"<font id=Page_index_Button_Link><a href=javascript:text_pagination("+(Page+1)+")>下一页</a></font>";}
temp=temp+"<font id=Page_index_Button color=#999999>末页</font>";
}
}
else{
// temp=temp+"<font color=red>1</font> ";
}
// temp=temp+" <a href=javascript:text_pagination(0)>显示全部</a>"
}
return (temp);
}
//默认页
text_pagination(startpage);
</script>
</body>
③ 页面js控制分页 一次性读到页面就做隐藏，然后js控制显示 如何做呢
可以这样做，你把数据放到一定规律的DIV里
如：<div class='datacss' id='data1'>数据</div>
<div class='datacss' id="data2'>数据</div>
...
触发页码时可以用jquery($(".datacss").hide())隐藏，专跟着显示你传递属的页码如
function PageNum(vrd)
{
$(".datacss").hide();
$("#data"+vrd).show();
}
④ js如何使用Pagination+PageHelper实现分页
通过element-ui的内置组件pagination实现分页，任何分页都有以下五个部分组成：记录的总条数、每页显示的记录条数、总页数、当前是第几页、当前页的所有记录。pagination实际上是一个组件，组件里设置了分页常用到的参数，让pagination组件得到分页常用的参数值，这就能够实现分页了。真分页：当你目前在首页的时候，点击第二页或下一页的时候，会重新向后端发送请求，请求第二页的数据；假分页:一开始从后端发送请求获取所有的数据，前端通过在组件的方式对数据进行分页，再点击分页的按钮的时候，数据其实已经在浏览器缓存的缓存中了，不需要再请求后端接口。
后端使用PageHelper实现分页的步骤包括：1、在pom.xml中添加pageHelper的依赖；2、在映射文件中书写SQL查询语句；注意：语句结束不要用；；3、书写Controller类，注意：调用PageHelper的startPage方法一定要在调用接口中方法前；4、启动tomcat服务器，使用Apipost对接口进行测试，如果接口没有问题的话，就会在实时响应中获取到返回值信息。
前端使用Pagination组件实现分页的步骤包括：1、添加template标签的内容到需要分页的页面中；2、根据element集成中，在script中导入Pagination组件；3、注册本地组件，并且因为在添加template标签的时候，绑定的有属性和方法，所以要对属性进行声明，以及方法的实现；4、实现 getList() 方法，发送axios请求获取后端传递的数据，分别将返回的总条数和数据信息分贝赋给本地的total、list集合；5、使用 created()方法，让页面加载时候调用 getList()方法，实现分页即可。
分页中可以在进行更为详细的设置，比如背景色、当前页、总页数、去往第几页等等都可以在pagination的index.vue中进行设置。可以进行适当的修改，或者如果不想要某些功能，删除对应的部分即可。