前端分頁功能的實現以及原理

2022-01-14 08:23:52 字數 3052 閱讀 6217

原文**：點我

定義乙個分頁方法，可多次呼叫

引數設定

請求資料頁面跳轉方法

建立非數字按鈕和資料內容區

建立數字按鈕

首屏載入

呼叫




function paginationnick(opt)
幾個必填的容器class，和幾個可以修改的預設資料引數

var pager=;


pager = $.extend(pager,opt);
建立所有的按鈕時都用了自定義屬性data-page保留要跳轉的頁碼資訊，呼叫時將此屬性作為引數用於跳轉頁面判斷。

function gopage(btn)

var obj=,value:[11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0]};
將展示的資料賦值給pager.data (array)

pager.data=obj.value;
設定ajax請求資料分成的最大頁碼

pager.maxcount=pager.data.length % pager.pagecount ? parseint(pager.data.length / pager.pagecount) +1 :


pager.data.length / pager.pagecount;



if(!isnan(btn))else


break;


case 'next':


if(pager.currentpage+1


createnumbtn(pager.currentpage);

$('.'+pager.btnbox+' .'+pager.ipt).val(pager.currentpage+1);

var arr=,str='';


arr=pager.data.slice(pager.pagecount*pager.currentpage,


pager.data.length - pager.pagecount*(pager.currentpage+1) > -1 ?


pager.pagecount*(pager.currentpage+1) : pager.data.length);


arr.foreach(function(v));


$('.'+pager.mainbox).html(str);



function createotherbtn()

$('.'+pager.paginationbox).html('首頁


確定go


尾頁');



$('.'+pager.btnbox+' .'+pager.ipt).change(function()


if($(this).val()<1)


}else


$('.'+pager.btnbox+' .'+pager.gobtn).attr('data-page',$(this).val() ? $(this).val()-1 : '');


});

$('.'+pager.btnbox+' button').each(function(i,v)


});});



function createnumbtn(page)

將數字按鈕區分成當前頁左右2邊分析，需要注意的地方都加注釋了

var str='';


if(pager.maxcount>pager.numbtncount*2)


}else


}str+=''+(page+1)+'';//此頁


if(pager.maxcount-page>3)


}else


}/*數字按鈕總數小於固定的數字按鈕總數pager.numbtncount*2+1時，


這個分支，可以省略*/


if(str.match(//ig).length'+(n+1)+'';


}str+=''+(page+1)+'';//此頁


for(var x=1;x'+(page+x+1)+'';}}


if(pager.maxcount-page-10;y--)


str+=''+(page+1)+'';//此頁


for(var z=page+1;z'+(z+1)+'';}}


}}else


str+=''+(page+1)+'';//此頁


for(var x=1;x'+(page+x+1)+'';}}


$('.'+pager.numbtnbox).html(str);



$('.'+pager.numbtnbox+' button').each(function(i,v));


});

$('.'+pager.btnbox+' button').not('.'+pager.currentbtn).attr('disabled',false);


if(!page)


if(page==pager.maxcount-1)



createotherbtn();//首屏載入一次非數字按鈕即可


gopage();//請求資料頁面跳轉滿足條件按鈕點選都執行，首屏預設跳轉到currentpage



paginationnick();
需要注意的地方，注釋都加上了！

完整**：

1


2320


2122


23211


212
view code

至此，over。寫的有點low，但複製完整**此分頁功還是能實現的，若有大神改進，望瞻仰！

完整的氣泡排序實現以及原理

氣泡排序 比較次數的公式 n n 1 2 原理 相鄰元素兩兩比較，值較大者往後放，第一次比較完畢，最大值出現在了最大索引處。public class bubblesort system.out.println 氣泡排序前 for int i num 第一次比較 是為了防止陣列越界 num.lengt...

vue實現簡單的前端分頁功能

名稱th 數量th tr thead v for item,index in currentpagedata key index td td tr tbody table class pagebox class page class pagelist v model value placeholde...

前端結合elementui實現分頁功能

在elementui中使用table元件完成頁面的大概框架，並且使用pagination分頁元件 tips 這裡不是重點，不做過多闡述 通過axios把資料全部渲染到頁面上 使用el pagination分頁元件，定義分頁中的基礎資料 每頁顯示多少資料，資料總條數等 定義乙個新的儲存頁面資料的new...