純JavaScript實(shí)現(xiàn)的分頁(yè)插件實(shí)例
本文實(shí)例講述了純JavaScript實(shí)現(xiàn)的分頁(yè)插件。分享給大家供大家參考。具體如下:
//總條數(shù)(必填) var Num=Number(<?php echo $count;?>) //當(dāng)前頁(yè)(必填) var index = Number(<?php echo $page;?>); /* //每頁(yè)的條數(shù)(可選,默認(rèn)每頁(yè)10條) */ var pageNum=Number(10); /* //最大顯示的頁(yè)碼的數(shù)目(可選,默認(rèn)顯示5個(gè)頁(yè)碼,頁(yè)碼數(shù)目必須大于等于1) */ var maxPageNum=Number(5); //以下可忽略 //計(jì)算得出總頁(yè)數(shù) var count = (Num%pageNum)>0?(Num/pageNum+1):(Num/pageNum); count=Math.floor(count);//取整轉(zhuǎn)化為數(shù)據(jù)類(lèi)型 //顯示的最小頁(yè)碼, var first=1; //顯示的最大頁(yè)碼,首先last<=count;其次last是小于等于count的最大數(shù)//last=index+maxPageNum/2; var last =1; var decrease=Math.floor(maxPageNum/2);//當(dāng)前頁(yè)向上增加值 var increase=Math.floor(maxPageNum/2);//當(dāng)前頁(yè)向下減少值 if(maxPageNum>=1){ if(maxPageNum==1){//最多顯示一頁(yè)時(shí) first=index<=count?index:count; last=index<=count?index:count; }else{ //first要大于零 first=(index-decrease); while(first<=0){ first++; } //first判斷顯示的最后一頁(yè) if((count-index)<=decrease){ var diff=count-first; while(diff<maxPageNum-1){ if(first==1){ break; }else{ --first; diff=count-first; } } } //last要小于count last=(index+increase); while(last>=1){ if(last<=count){ break; } last--; } //last//判斷顯示的最后一頁(yè)與maxPageNum的關(guān)系 last=last>=maxPageNum?last:(maxPageNum>count?count:maxPageNum); } }else{ alert("至少需要顯示一個(gè)頁(yè)碼!"); } var prev = index - 1;//上一頁(yè) var next = index+ 1;//下一頁(yè) var str = "<tr>"; if(count==0){ str += "<td>共<a href='#'>0</a>頁(yè)</td><td>"; }else if(index>count||index<=0){ str="<td style='color:blue;' >頁(yè)碼超出范圍</td>"; }else if (count > 0) { str += "<td>"; if(first>1){ str += " <span style='color:#4169E1;' >...</span> "; } var i=1; for(i=first;i<=last; i++){ if(i==index){ str += " <a href='#' style='color:#4169E1;' onclick='submit(" + i + ");'>[" + i+ "]</a> "; }else{ str += " <a href='#' onclick='submit(" + i + ");'>" + i+ "</a> "; } } if(last<count){ str += " <span style='font-size:16px;color:#4169E1;' >...</span> "; } str+="</td><td style='font-size: 14px;'>共<a href='#first' style='color:#4169E1;font-size: 16px;' >"+ Num +"</a>條</td>"; /* if(index!=1){ str +="<td style='width:60px;font-family: 微軟雅黑;font-size: 14px;' ><a href='#' id='prev' onclick='submit(" + prev+ ");'>上一頁(yè)</a></td>"; } if(index<count){ str +="<td style='width:60px;font-family: 微軟雅黑;font-size: 14px;'><a href='#' id='next' onclick='submit("+ next + ");'>下一頁(yè)</a></td>"; }*/ if(index!=1&&count>1){ str += "<td style='width:40px;font-family: 微軟雅黑;font-size: 14px;white-space: nowrap;'> <a href='#' id='first' name='first' onclick='submit(1);'>首頁(yè)</a> </td>"; } if(index!=count&&count>1&&index<count){ str += "<td style='width:40px;font-family: 微軟雅黑;font-size: 14px;white-space: nowrap;'> <a href='#' onclick='submit(" + count+ ");'>尾頁(yè)</a> </td>" ; } str+="</tr>"; } //分頁(yè)區(qū)域填寫(xiě) $('.page').html(str); <table class="page"> <tr><td>此處分頁(yè)只需要傳遞給我當(dāng)前頁(yè)碼和總頁(yè)數(shù)即可</td></tr> </table> //根據(jù)頁(yè)碼查詢, function submit(pageIndex) { //var sortInfo = $.getUrlParam('sortInfo');//判斷是哪一個(gè)頁(yè)面的查詢 var url = "<?php echo current_url();?>?page="+pageIndex+"&field=<?php echo$field;?>&value=<?php echo $field_value;?>"; window.location.href=url; }
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- jquery pagination插件實(shí)現(xiàn)無(wú)刷新分頁(yè)代碼
- jquery+ashx無(wú)刷新GridView數(shù)據(jù)顯示插件(實(shí)現(xiàn)分頁(yè)、排序、過(guò)濾功能)
- asp.net jquery無(wú)刷新分頁(yè)插件(jquery.pagination.js)
- jQuery Pagination Ajax分頁(yè)插件(分頁(yè)切換時(shí)無(wú)刷新與延遲)中文翻譯版
- jQuery插件分享之分頁(yè)插件jqPagination
- jquery+css3打造一款ajax分頁(yè)插件(自寫(xiě))
- 分享一個(gè)自己動(dòng)手寫(xiě)的jQuery分頁(yè)插件
- 原生javascript實(shí)現(xiàn)的分頁(yè)插件pagenav
- 封裝好的javascript前端分頁(yè)插件pagination
- jquery分頁(yè)插件jquery.pagination.js使用方法解析
相關(guān)文章
200行代碼實(shí)現(xiàn)blockchain 區(qū)塊鏈實(shí)例詳解
這篇文章主要介紹了200行代碼實(shí)現(xiàn)blockchain 區(qū)塊鏈的相關(guān)知識(shí),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2018-03-03在父頁(yè)面得到zTree已選中的節(jié)點(diǎn)的方法
這篇文章主要介紹了在父頁(yè)面得到zTree已選中的節(jié)點(diǎn)的方法,實(shí)例分析了zTree針對(duì)節(jié)點(diǎn)的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02解決JS組件bootstrap table分頁(yè)實(shí)現(xiàn)過(guò)程中遇到的問(wèn)題
這篇文章主要介紹了JS組件bootstrap table分頁(yè)實(shí)現(xiàn)過(guò)程中遇到的問(wèn)題,感興趣的小伙伴們可以參考一下2016-04-04layui table checked獲取選中數(shù)據(jù)方式
這篇文章主要介紹了layui table checked獲取選中數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10use jscript List Installed Software
use jscript List Installed Software...2007-06-06javascript實(shí)現(xiàn)圖片自動(dòng)和可控的輪播切換特效
這篇文章主要介紹了javascript實(shí)現(xiàn)圖片自動(dòng)和可控的輪播切換特效,效果非常的棒,推薦給大家,有需要的小伙伴可以參考下。2015-04-04詳解JavaScript中的強(qiáng)制類(lèi)型轉(zhuǎn)換和自動(dòng)類(lèi)型轉(zhuǎn)換
這篇文章中我們將深入探索一下 JavaScript 中的類(lèi)型轉(zhuǎn)換,揭示強(qiáng)制類(lèi)型轉(zhuǎn)換、自動(dòng)類(lèi)型轉(zhuǎn)換和轉(zhuǎn)換函數(shù)的奧秘,快跟隨小編一起學(xué)習(xí)一下吧2023-12-12利用Three.js制作一個(gè)新聞聯(lián)播開(kāi)頭動(dòng)畫(huà)
這篇文章主要為大家介紹了如何利用Three.js制作一個(gè)新聞聯(lián)播開(kāi)頭動(dòng)畫(huà),文中的實(shí)現(xiàn)步驟講解詳細(xì),對(duì)我們學(xué)習(xí)有一定幫助,需要的可以參考一下2022-05-05