コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > javascript ajax 模倣 Baidu ページング関数_javascript スキル

javascript ajax 模倣 Baidu ページング関数_javascript スキル

WBOY
リリース： 2016-05-16 17:18:18
オリジナル
1126 人が閲覧しました
复制代代码如下:

/**
* Ajax ページング関数
* ページングが必要な場合、ページング コンポーネントのコンテナ要素として

    * を追加します。
    * pageCount 総ページ数
    * currentPage 現在のページ番号
    * ページネーション クラスを持つコンテナーまたはコンテナー要素
    * データをロードするためのloadData 関数
    * バージョン 1.0
    */
    ページネーション : function( pageCount、currentPage、container、loadData) {
    this.startPage = 1;
    this.endPage = pageCount;
    this.minDisplayPageCount = 5;
    var c = $(コンテナ);
    var paginationLinks = "";
    if(pageCount == 1) {
    c.css({'visibility': 'hidden'});
    戻る;
    }
    if(pageCount > this.minDisplayPageCount 1) {
    if(currentPage - this.minDisplayPageCount > 0) {
    this.startPage = currentPage - this.minDisplayPageCount;
    }
    if((currentPage this.minDisplayPageCount - 1) < pageCount) {
    this.endPage = currentPage this.minDisplayPageCount - 1;
    } else {
    this.endPage = pageCount;
    }
    }
    paginationLinks = "
      ";
      if(currentPage != 1) {
      paginationLinks = "
      • ";
      }
      for(var i = this.startPage; i if(currentPage == i) {
      paginationLinks = "
    • " currentPage "
      • ";
      } else {
      paginationLinks = "
    • " i "
      • ";
      }
      }
      if(currentPage < pageCount) {
      paginationLinks = "
      • ";
      }
      paginationLinks = "
    ";
    c.html(ページネーションリンク);
    var links = $("#page_number ul li a");
    links.each(function(index) {
    if(!(this.innerHTML == "上一页" || this.innerHTML == "下一页")) {
    $(this ).click(function(event) {
    alert(links[index].innerHTML);
    loadData(curTaskId,"","",parseInt(links[index].innerHTML));
    ページネーション(pageCount、parseInt(links[index].innerHTML)、コンテナ、loadData)
    }
    });
    var prevPage = $("#prevpage");
    var nextPage = $("#nextpage");
    c.css({'可視性': '可視'});
    if(prevPage) {
    prevPage.click(function(event) {
    loadData(curTaskId,"","",currentPage - 1);
    pagination(pageCount, currentPage - 1,container) 、loadData);
    });
    }
    if(nextPage) {
    nextPage.click(function(event) {
    loadData(curTaskId,"","",currentPage 1);
    pagination(pageCount, currentPage 1) 、コンテナ、loadData);
    });
    }
    }

loadData は追加データの関数です。この関数には、定義された現在の页数のパラメータが必要です。例:

复制代代码如下:
var currentPage = 1;
loadExamList(currentPage){
//TODO
pagination(5,currentPage,$(ul),loadExamList);
};

5 は総数、1 は現在の数、$(ul) はコードファイルを保存する必要がある位置、loadExamList は点の上一页、下一页またはそのコードの時間調整に使用されます。関数数。
関連ラベル：
ページング機能
ソース：php.cn
前の記事：同じratio_javascriptスキルで画像をjsスケーリングする小さな例 次の記事：javascript_javascript スキルでカラー グラデーションを実装する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
Reactのsortメソッドでレンダリング(フィルターとページネーションを使用)をトリガーするにはどうすればよいですか? これが私の Sort.js スタイル コンポーネントです: <SortWrapper><SortText>SortBy</SortText>&l...
から 2024-04-06 21:28:37
0
1
2257
for ループはランダムに 1 から 0 まで変化します 基本的に、ページが更新されるたびに、for ループは 1 から 0 に変化する可能性があります。なぜこのようなことが起こるのかはわかりませんが、画像を重ね合わせる方法に影響します。...
から 2024-04-06 16:48:14
0
1
393
CSS グリッドの高さが期待したものと異なるという問題が発生しています。どのような間違いを犯している可能性がありますか? 私は現在 CSS グリッドを学習しており、このカードをグリッドに分割して作成するように依頼されました。作りたいグリッドの写真を添付し​​ます。実際には、これらすべてのカードが配置さ...
から 2024-04-06 12:52:14
0
1
339
VueJS スケジューリング関数の実行順序により問題が発生する APIから取得したお知らせのリストをページに表示しようとしています。私は Vuex ストアを使用しており、アナウンスと呼ばれる状態があります。また、ユーザーがページを更新/入力する...
から 2024-04-06 10:37:58
0
1
385
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート