首頁 > web前端 > js教程 > js css實作的簡單易用相容好的分頁_javascript技巧

js css實作的簡單易用相容好的分頁_javascript技巧

WBOY
發布: 2016-05-16 17:05:57
原創
1234 人瀏覽過

效果:
js css實作的簡單易用相容好的分頁_javascript技巧 
html:

複製程式碼 程式碼如下:
>


用法:


複製程式碼複製程式碼

複製程式碼



複製程式碼



複製程式碼


程式碼如下:
var total = 310; var pageNo = 1; var pageCount = 31;//總共有多少頁var pageSize = 10 var; actionName = "list.action";
var otherParam = "&name='www'&order='time'";
$(function(){
paginate();//分頁}
);


css:




複製程式碼


程式碼如下:



程式碼如下:

>#page{
font-size: 14px;
clear: both;
padding-top: 1.45em;
white-space: nowrap;
}
#page a{
background: white;
border: 1px solid #E7ECF0;
display: inline-block;
height: 22px; line-height: 22px; margin; ; text-align: center; text-decoration: none; vertical-align: middle; width: 23px;
}
#pagePre,#pageNext{

}
.pageCurrent{
font-weight: bold;
}


js:



js:












複製程式碼


程式碼如下:


function mcPaginate(){

var $pageDiv = $("#page");

var $pageDiv = $("#page"); 🎜>actionName = actionName "?pageSize=" pageSize;


if(typeof otherParam != 'undefined' && otherParam != ""){
actionName = actionName otherParam>;

$pageDiv.append("第" pageNo "頁/共" pageCount "頁");

//上一頁
if(pageNo > 1){
var hf = actionName "&pageNo=" (pageNo-1);
$pageDiv.append("" "上一頁" " a>");
};

if(pageCount for(var i=0; i var hf = actionName "&pageNo =" (i 1);
if(pageNo == (i 1)){//目前頁
$pageDiv.append("
" pageNo "");
}else{
$pageDiv.append("" (i 1) "");
};
};
}else{
for(var i=0; i var midIndex = 0;
if(pageSize%2 == 0) {
midIndex = pageSize/2 - 1;
}else{
midIndex = pageSize/2;
}
var num = -midIndex;
var showPageNum = page i num;
if(showPageNum > 0 && showPageNum var hf = actionName "&pageNo=" showPageNum; if(pageNoum== show/Num;當前頁$pageDiv.append("" showPageNum ""); }else{ $pageDiv.append( "" showPageNum ""); }; }; }; } //下一頁if(pageNo var hf = actionName "&pageNo=" (pageNo 1); $pageDiv.append("" "下一頁" ""); }; $pageDiv.append("轉到" ""); $( ".goButton").click(function(){ var goNum = $(".goNum").val(); if(goNum!=""){ window.location.href = actionName "&pageNo=" goNum; } }); };
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板