JavaScriptによるリストページング機能の特効

3369 ワード

最近jsのページ分けの方法を書いて、すでに既成のものがあるにもかかわらず、自分で書いて、はっきりさせたいと思っています.最終的に実現される効果は、前ページ、第1ページ、...(上nページ)、nページ、...(下nページ)、最後ページ、次ページである.nは奇数でも偶数でもよく、一般的に奇数を取るのが好きで、星石が呼び出されたときに伝わるパラメータは5です.書くとき、主に以下の点に注意しました.
ページ番号が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 +=‘
  • 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;
    }
    以上が本文のすべてですが、お好きになってください.