① 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中進行設置。可以進行適當的修改，或者如果不想要某些功能，刪除對應的部分即可。