純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)文章
JS實現(xiàn)帶圓弧背景漸變效果的導(dǎo)航菜單代碼
這篇文章主要介紹了JS實現(xiàn)帶圓弧背景漸變效果的導(dǎo)航菜單代碼,涉及JavaScript基于鼠標(biāo)事件操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
創(chuàng)建一個復(fù)制UBB軟件信息的鏈接或按鈕的js代碼
2008-01-01
uni-app使用uploadFile上傳多張圖片的具體實現(xiàn)
在微信小程序中不支持多張圖片上傳,需要做循環(huán)實現(xiàn)多張圖片上傳,下面這篇文章主要給大家介紹了關(guān)于uni-app使用uploadFile上傳多張圖片的具體實現(xiàn),需要的朋友可以參考下2023-04-04
JavaScript 檢測瀏覽器和操作系統(tǒng)的腳本
代碼轉(zhuǎn)自《Professional JavaScript™ for Web Developers》一書。2008-12-12
JavaScript利用HTML DOM進(jìn)行文檔操作的方法
DOM是W3C制定的用于訪問諸如XML和XHTML等結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)。通過本文給大家介紹JavaScript利用HTML DOM進(jìn)行文檔操作的方法,需要的朋友參考下吧2016-03-03

