分頁效果(jq和ajax原生js)2020-08-13

????????????????????????????????????????????????????

<!--?實現(xiàn)效果 -->


var?a?=?document.getElementById("tbody").getElementsByTagName("tr");

????????????????????????????????????????????????????//alert(a.length);

????????????????????????????????????????????????????var?zz?=?new?Array(a.length);

????????????????????????????????????????????????????//alert(zz.length);

????????????????????????????????????????????????????for?(var?i?=?0;?i?<?a.length;?i++)?{

????????????????????????????????????????????????????????zz[i]?=?a[i].innerHTML

????????????????????????????????????????????????????}?//div的字符串數(shù)組付給zz

????????????????????????????????????????????????????var?pageno?=?1;?//當前頁

????????????????????????????????????????????????????var?pagesize?=?15;?//每頁多少條信息

????????????????????????????????????????????????????if?(zz.length?%?pagesize?==?0)?{

????????????????????????????????????????????????????????var?pageall?=?zz.length?/?pagesize

????????????????????????????????????????????????????}?else?{

????????????????????????????????????????????????????????var?pageall?=?parseInt(zz.length?/

????????????????????????????????????????????????????????????pagesize)?+?1

????????????????????????????????????????????????????}?//一共多少頁

????????????????????????????????????????????????????$("#p").text(pageall);?//將pageall的值存放到div中,便于下次使用

????????????????????????????????????????????????????change(1,?pageall,?zz);


????????????????????????????????????????var?k;

????????????????????????????????????????function?change(e,?all,?zu)?{

????????????????????????????????????????????zz?=?zu;

????????????????????????????????????????????var?pagesize?=?15;?//每頁多少條信息

????????????????????????????????????????????pageall?=?all;?//總頁數(shù)

????????????????????????????????????????????pageno?=?e;?//當前頁

????????????????????????????????????????????if?(e?<?1)?//如果輸入頁<1頁

????????????????????????????????????????????{

????????????????????????????????????????????????e?=?1;

????????????????????????????????????????????????pageno?=?1

????????????????????????????????????????????}?//就等于第1頁?,?當前頁為1

????????????????????????????????????????????if?(e?>?pageall)?//如果輸入頁大于最大頁

????????????????????????????????????????????{

????????????????????????????????????????????????e?=?pageall;

????????????????????????????????????????????????pageno?=?pageall

????????????????????????????????????????????}?//輸入頁和當前頁都=最大頁

????????????????????????????????????????????document.getElementById("tbody").innerHTML?=?"";?//全部清空

????????????????????????????????????????????for?(var?i?=?0;?i?<?pagesize;?i++)?{

????????????????????????????????????????????????var?div?=?document.createElement("tr");?//建立div對象

????????????????????????????????????????????????div.innerHTML?=?zz[(e?-?1)?*?pagesize?+?i];?//建立顯示元素

????????????????????????????????????????????????document.getElementById("tbody").appendChild(div);?//加入tbody中

????????????????????????????????????????????????if?(zz[(e?-?1)?*?pagesize?+?i?+?1]?==?null)?//超出范圍跳出

????????????????????????????????????????????????????break

????????????????????????????????????????????}

????????????????????????????????????????????var?ye?=?"";

????????????????????????????????????????????for?(var?j?=?1;?j?<=?pageall;?j++)?{

????????????????????????????????????????????????if?(e?==?j)?{

????????????????????????????????????????????????????ye?=?ye?+?"<span><a?href='#'?onClick='change1("?+?j?+

????????????????????????????????????????????????????????")'?style='color:#FF0000'>"?+?j?+

????????????????????????????????????????????????????????"</a></span>?"

????????????????????????????????????????????????}?else?{

????????????????????????????????????????????????????ye?=?ye?+?"<a?href='#'?onClick='change1("?+?j?+?")'>"?+?j?+?"</a>?"

????????????????????????????????????????????????}

????????????????????????????????????????????}

????????????????????????????????????????????document.getElementById("a1").innerHTML?=?pageall;

????????????????????????????????????????????document.getElementById("a2").innerHTML?=?pageno;

????????????????????????????????????????????document.getElementById("a3").innerHTML?=?ye;

????????????????????????????????????????????/*如果當前是第一頁則:*/

????????????????????????????????????????????if?(pageno?==?1)?{

????????????????????????????????????????????????$('#down').hide();?//隱藏

????????????????????????????????????????????}?else?{

????????????????????????????????????????????????$('#down').show();?//顯示

????????????????????????????????????????????}

????????????????????????????????????????????/*如果是最后一頁則:*/

????????????????????????????????????????????if?(pageno?==?pageall)?{

????????????????????????????????????????????????$('#up').hide();?//隱藏

????????????????????????????????????????????}?else?{

????????????????????????????????????????????????$('#up').show();?//顯示

????????????????????????????????????????????}

????????????????????????????????????????????k?=?zu;

????????????????????????????????????????}

????????????????????????????????????????function?change1(e)?{

????????????????????????????????????????????zz?=?k;

????????????????????????????????????????????var?pagesize?=?15;

????????????????????????????????????????????pageall?=?$("#p").text();

????????????????????????????????????????????pageno?=?e;

????????????????????????????????????????????if?(e?<?1)?//如果輸入頁<1頁

????????????????????????????????????????????{

????????????????????????????????????????????????e?=?1;

????????????????????????????????????????????????pageno?=?1

????????????????????????????????????????????}?//就等于第1頁?,?當前頁為1

????????????????????????????????????????????if?(e?>?pageall)?//如果輸入頁大于最大頁

????????????????????????????????????????????{

????????????????????????????????????????????????e?=?pageall;

????????????????????????????????????????????????pageno?=?pageall

????????????????????????????????????????????}?//輸入頁和當前頁都=最大頁

????????????????????????????????????????????document.getElementById("tbody").innerHTML?=?"";?//全部清空

????????????????????????????????????????????for?(var?i?=?0;?i?<?pagesize;?i++)?{

????????????????????????????????????????????????var?div?=?document.createElement("tr");?//建立div對象

????????????????????????????????????????????????div.innerHTML?=?zz[(e?-?1)?*?pagesize?+?i];?//建立顯示元素

????????????????????????????????????????????????document.getElementById("tbody").appendChild(div);?//加入tbody中

????????????????????????????????????????????????if?(zz[(e?-?1)?*?pagesize?+?i?+?1]?==?null)?//超出范圍跳出

????????????????????????????????????????????????????break

????????????????????????????????????????????}

????????????????????????????????????????????var?ye?=?"";

????????????????????????????????????????????for?(var?j?=?1;?j?<=?pageall;?j++)?{

????????????????????????????????????????????????if?(e?==?j)?{

????????????????????????????????????????????????????ye?=?ye?+?"<span><a?href='#'?onClick='change1("?+?j?+

????????????????????????????????????????????????????????")'?style='color:#FF0000'>"?+?j?+

????????????????????????????????????????????????????????"</a></span>?"

????????????????????????????????????????????????}?else?{

????????????????????????????????????????????????????ye?=?ye?+?"<a?href='#'?onClick='change1("?+?j?+?")'>"?+?j?+?"</a>?"

????????????????????????????????????????????????}

????????????????????????????????????????????}

????????????????????????????????????????????document.getElementById("a1").innerHTML?=?pageall;

????????????????????????????????????????????document.getElementById("a2").innerHTML?=?pageno;

????????????????????????????????????????????document.getElementById("a3").innerHTML?=?ye;

????????????????????????????????????????????/*如果當前是第一頁則:*/

????????????????????????????????????????????if?(pageno?==?1)?{

????????????????????????????????????????????????$('#down').hide();?//隱藏

????????????????????????????????????????????}?else?{

????????????????????????????????????????????????$('#down').show();?//顯示

????????????????????????????????????????????}

????????????????????????????????????????????/*如果是最后一頁則:*/

????????????????????????????????????????????if?(pageno?==?pageall)?{

????????????????????????????????????????????????$('#up').hide();?//隱藏

????????????????????????????????????????????}?else?{

????????????????????????????????????????????????$('#up').show();?//顯示

????????????????????????????????????????????}

????????????????????????????????????????}



????????????????????????????<!--分頁-->

????????????????????????????<div?class="page"

????????????????????????????????style="padding-left:?40%;border-top:?1px?solid?#ddd;?border-bottom:?2px?solid?#ff8830;">

????????????????????????????????<a?id="down"?href="#"?onClick="change1(--pageno)">上一頁</a>

????????????????????????????????<span?id="a3"></span><a?id="up"?href="#"?onClick="change1(++pageno)">下一頁</a>

????????????????????????????????<span?class="ho">第<span?id="a2"></span>/<span?id="a1"></span>頁</span>

????????????????????????????</div>

????????????????????????????<!--用來存放總頁數(shù),放置在body中-->

????????????????????????????<div?style="display:none"?id="p"></div>

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容