jsページングツールの例_javascriptスキル

この記事の例では、js ページング ツールの使用法について説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

js コード部分:

コードをコピー コードは次のとおりです:

/**
* ページネーション js
​*/
var ページ; 
 
(関数(){
        var ページ = {バージョン:"1.0",作者:"liuxingmi"}; 
        var showPage = 9; 
        Page.navigation = function(divId, totalRecord, totalPage, currentPage, func){
            var nav = '

'; 
                   nav = '
• 总记录数：' totalRecord '
'; 
                   nav = '
• 总页数：' totalPage '
'; 
                   nav = '
• 当前页：' currentPage '
'; 
                   if(currentPage == 1){
                       nav = '
• 首页
'; 
                       nav = '
• 前一页
'; 
                   } else {
                       nav = '
• 首页
'; 
                       nav = '
• 前一页
'; 
                   }
                   nav = '
• '; 
                           var start = currentPage - Math.floor(showPage/2); 
                           var end = currentPage Math.floor(showPage/2);
                           if(end > totalPage){
                               開始 -= (終了 - 合計ページ); 
                           }
                            
                           if(start                              開始 = 1;  
                           }
                           if(currentPage < showPage && end < showPage){
                              終了 = ページを表示;   
                           }
                            
                           if(end > totalPage){
                               終了 = 合計ページ; 
                           }
                           for(var i = start; i                              if(i == currentPage){
                                   nav = '
  1. ' i '
  '; 
                               } else {
                                   nav = '
  2. ' i '
  '; 
                               }
                           }
                            
                           nav = '
'; 
                         if(currentPage == totalPage){
                             nav = '
• 後一页
'; 
                             nav ='
• 尾页'; 
                           } else {
  nav = '
• 次のページ ページ< ;/a>
  nav ='
• 最後のページ
                                                           nav = '

'; $("#" divId).html(nav); }; This.Page = ページ
})();



CSS 部分:

コードをコピー

コードは次のとおりです:/*改ページ スタイルの開始*/ .ページネーション{ オーバーフロー:非表示

マージン:0 0 0 25px; パディング:10px 10px 6px 150px; ボーダートップ:1px ソリッド #c8c8c8; _ズーム:1; テキスト配置: 中央;

}
.ページネーション *{
表示:インライン
フロート:左
マージン:0; パディング:0; フォントサイズ:12px; }
.ページネーション i{
フロート: なし
パディング右:1px; }
.currentPage b{
フロート: なし
色:#f00; }
.pagination li{
リストスタイル:なし
マージン:0 5px; }
.pagination li li{
位置:相対; マージン:-2px 0 0; フォントファミリー: Arial、Helvetica、サンセリフ
}
.firstPage a,.previousPage a,.nextPage a,.lastPage a{
オーバーフロー:非表示
高さ:0; テキストインデント:-9999em; ボーダートップ:8px ソリッド
ボーダーボトム:8px ソリッド
}
.pagination li li a{
マージン:0 1px; パディング:0 4px; ボーダー:3px ダブル #fff; 境界線の色:#eee; 背景:#eee; カラー:#06f; テキスト装飾:なし
}
.pagination li li a:hover{
背景:#f60; 境界線の色:#fff; 境界線の色:#f60;
色:#fff; }
li.firstPage{
マージン左:40px; ボーダー左:3px ソリッド #06f; }
.firstPage a,.previousPage a{
border-right:12px ソリッド #06f; }
.firstPage a:hover,.previousPage a:hover{
ボーダー右の色: #f60;
}
.nextPage a,.lastPage a{
ボーダー左:12px ソリッド #06f; }
.nextPage a:hover,.lastPage a:hover{
ボーダー左色:#f60;
}
.pagination li.lastPage{
ボーダー右:3px ソリッド #06f; }
.pagination li li.currentState a{
位置:相対; マージン:-1px 3px; パディング:1px 4px; ボーダー:3px ダブル #fff; 境界線の色:#f60;
背景:#f60; 色:#fff; }
.pagination li.currentState,.currentState a,.currentState a:hover{
境界線の色:#fff #ccc; カーソル:デフォルト; }
/*ページングスタイルの終わり*/



呼び出しメソッド:






コードをコピー


コードは次のとおりです:

Page.navigation("pageNav", 100, 10, 1, "xxxList");

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。