JavaScriptによるリストページング機能の特効
3369 ワード
最近jsのページ分けの方法を書いて、すでに既成のものがあるにもかかわらず、自分で書いて、はっきりさせたいと思っています.最終的に実現される効果は、前ページ、第1ページ、...(上nページ)、nページ、...(下nページ)、最後ページ、次ページである.nは奇数でも偶数でもよく、一般的に奇数を取るのが好きで、星石が呼び出されたときに伝わるパラメータは5です.書くとき、主に以下の点に注意しました.
ページ番号が1に等しい場合、前のページ、最初のページ、最後のページのみが表示され、ジャンプはありません.ページ番号が2以下の場合、中間のn個のページ番号は必要ありません.ページ番号がn以下の場合、すべてのページ番号が表示され、2つの「...」は表示されません.2つの「...」をページ変更すると、n個のページ番号が変更され、一番前または一番後ろに近い場合は、一番前または一番後ろのn個のページ番号が表示されます.
以下にコードを貼って、皆さんの検討に供します.
if(tp>1 && cp>1){
var prev = cp-1;
str += ‘ 前のページ ‘;
}else{
str += ‘ 前のページ ‘;
}
if(tp>1){
//1ページ目
if(cp==1){
str +=‘ 1 ‘;
}else{
str +=‘ 1 ‘;
}
if(tp>2){
var pnh = Math.floor(pn/2);
//循環開始ページ番号
var s = cp-pnh;
if(s<=1){
s = 2;
}
//ループ終了ページ
var e = cp+pnh;
if(e>=tp){
e = tp-1;
}
if(s<=(1+pnh)){
if(tp>(pn+2)){
e = s+(pn-1);
if(e>=tp){
e = tp-1;
}
}else{
s = 2;
}
}
if(e>=(tp-pnh)){
if(tp>(pn+2)){
s = e-(pn-1);
if(s<=1){
s = 2;
}
}else{
e = tp-1;
}
}
if(e2){
var sp = cp-pn;
if(sp<1){
sp=1;
}
str += ‘ … ‘;
}
for(var i=s;i<=e;i++){
if(i==cp){
str += ‘ '+i+‘ ‘;
}else{
str += ‘ '+i+‘ ‘;
}
}
//最終ページ前の複数ページジャンプ
if(e < (tp-1)){
var ep = cp+pn;
if(ep>tp){
ep=tp;
}
str += ‘ … ‘;
}
}
//最後のページ
if(cp==tp){
str +=‘ '+tp+‘ ‘;
}else{
str +=‘ '+tp+‘ ‘;
}
}else{
str +=‘ 1 ‘;
}
if(tp>1 && cp 次のページ ';
}else{
str += ‘ 次のページ ';
}
str += ‘';
return str;
}
//ページ番号のジャンプ、アドレスのジャンプ
function goPage(cp,url){
window.location.href = url+cp;
}
以上が本文のすべてですが、お好きになってください.
ページ番号が1に等しい場合、前のページ、最初のページ、最後のページのみが表示され、ジャンプはありません.ページ番号が2以下の場合、中間のn個のページ番号は必要ありません.ページ番号がn以下の場合、すべてのページ番号が表示され、2つの「...」は表示されません.2つの「...」をページ変更すると、n個のページ番号が変更され、一番前または一番後ろに近い場合は、一番前または一番後ろのn個のページ番号が表示されます.
以下にコードを貼って、皆さんの検討に供します.
// , , ,
function pageBar(tp,cp,url,pn){
var str = ‘
';if(tp>1 && cp>1){
var prev = cp-1;
str += ‘
}else{
str += ‘
}
if(tp>1){
//1ページ目
if(cp==1){
str +=‘ 1 ‘;
}else{
str +=‘
}
if(tp>2){
var pnh = Math.floor(pn/2);
//循環開始ページ番号
var s = cp-pnh;
if(s<=1){
s = 2;
}
//ループ終了ページ
var e = cp+pnh;
if(e>=tp){
e = tp-1;
}
if(s<=(1+pnh)){
if(tp>(pn+2)){
e = s+(pn-1);
if(e>=tp){
e = tp-1;
}
}else{
s = 2;
}
}
if(e>=(tp-pnh)){
if(tp>(pn+2)){
s = e-(pn-1);
if(s<=1){
s = 2;
}
}else{
e = tp-1;
}
}
if(e2){
var sp = cp-pn;
if(sp<1){
sp=1;
}
str += ‘
}
for(var i=s;i<=e;i++){
if(i==cp){
str += ‘ '+i+‘ ‘;
}else{
str += ‘
}
}
//最終ページ前の複数ページジャンプ
if(e < (tp-1)){
var ep = cp+pn;
if(ep>tp){
ep=tp;
}
str += ‘
}
}
//最後のページ
if(cp==tp){
str +=‘ '+tp+‘ ‘;
}else{
str +=‘
}
}else{
str +=‘ 1 ‘;
}
if(tp>1 && cp 次のページ ';
}else{
str += ‘
}
str += ‘';
return str;
}
//ページ番号のジャンプ、アドレスのジャンプ
function goPage(cp,url){
window.location.href = url+cp;
}
以上が本文のすべてですが、お好きになってください.