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

