純粋なJavaScriptページングソースプラグイン
11118 ワード
github:https://github.com/OoSpace/Fy
効果:http://oospace.sinaapp.com/2.php?pageIndex=4
設計構想:少なくともページ番号の表示範囲がfirstからlastまで、および現在のページindex であることを知る必要がある.まずfirstの値とlastの値を決定する. いつでもfirst>=1 いつでも1<=last<=count 現在のページindexはfirstとlastの中間 にあるはずです.1ページあたりの表示本数はpageNum、最大表示枚数はmaxPageNum 一般:last=index+maxPageNum/2 一般:first=index-maxPageNum/2 特殊な場合:indexが最後のページにあるか、または最後のページに近い場合 上記のような場合.first=count(総ページ数)-maxPageNum-1かつ(第3条)、効果は以下の 
完全なコードは次のとおりです.
前のページの次のページの机能もあって、ただ私に遮られて隠れて、使うのはただ遮ることを解除するだけでいいです
使用方法及び注意:パラメータ構成、前の行、以下の ページング位置およびhtmlコード、以下の コードクエリイベント、以下の
OK、使えます
あるいは、もう一つの考えを整理しやすい方法です.
効果:http://oospace.sinaapp.com/2.php?pageIndex=4
設計構想:
完全なコードは次のとおりです.
// ( )
var Num=Number(<?php echo $count;?>)
// ( )
var index = Number(<?php echo $page;?>);
/* // ( , 10 ) */
var pageNum=Number(10);
/* // ( ， 5 , 1) */
var maxPageNum=Number(5);
//
//
var count = (Num%pageNum)>0?(Num/pageNum+1):(Num/pageNum);
count=Math.floor(count);//
// ,
var first=1;
// ， last<=count; last count //last=index+maxPageNum/2;
var last =1;
var decrease=Math.floor(maxPageNum/2);//
var increase=Math.floor(maxPageNum/2);//
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
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>";
}
//
$('.page').html(str);
<table class="page">
<tr><td> </td></tr>
</table>
// ,
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;
}前のページの次のページの机能もあって、ただ私に遮られて隠れて、使うのはただ遮ることを解除するだけでいいです
使用方法及び注意:
// ( )
var Num=Number(<?php echo $count;?>)
// ( )
var index = Number(<?php echo $page;?>);
/* // ( , 10 ) */
var pageNum=Number(10);
/* // ( ， 5 , 1) */
var maxPageNum=Number(5);//
$('.page').html(str);
<table class="page">
<tr><td> </td></tr>
</table>// ,
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;
}OK、使えます
あるいは、もう一つの考えを整理しやすい方法です.
//
v
ar Pagination=function(number,index,eachpage,showpage){
var page={
TOTAL_NUM:Number(number),// ，
INDEX_PAGE:Number(index),// ，
EACH_PAGE_NUM:eachpage!=undefined?Number(eachpage):5,// ( , 10 )
SHOW_PAGES_NUM:showpage!=undefined?Number(showpage):5,// ( ， 5 , 1)
TOTLE_PAGE_NUM:Math.floor((number%eachpage)>0?(number/eachpage+1):(number/eachpage)),// ，
CREASE:Math.floor(showpage/2),// ，
PREV:Number(index-1),//
NEXT:Number(index+1)//
};
var P=function(){
};
P.getByName=function(name){
return page[name];
};
return P;
};
//
var Fy=new Pagination(100,1,10,5);
var first=1,last=1;
var Num=Number(Fy.getByName("TOTAL_NUM"));
var Mpn=Number(Fy.getByName("SHOW_PAGES_NUM"));
var count=Number(Fy.getByName("TOTLE_PAGE_NUM"));
var index=Number(Fy.getByName("INDEX_PAGE"));
var crease=Number(Fy.getByName("CREASE"));
var prev=Number(Fy.getByName("PREV"));
var next=Number(Fy.getByName("NEXT"));
//
if(Mpn>=1){
if(Mpn==1){//
first=index<=count?index:count;
last=index<=count?index:count;
}else{
//first
first=(index-crease);
while(first<=0){
first++;
}
//first
if((count-index)<=crease){
var diff=count-first;
while(diff<Mpn-1){
if(first==1){
break;
}else{
--first;
diff=count-first;
}
}
}
//last count
last=(index+crease);
while(last>=1){
if(last<=count){
break;
}
last--;
}
//last// maxPageNum
last=last>=Mpn?last:(Mpn>count?count:Mpn);
}
}else{
alert(" !");
}
//
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>";
}