JSはフロントエンドのページング効果を実現します

JSはフロントエンドのページング効果を実現します

この記事の例では、フロントエンドのページング効果を実現するためのJSの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

1. HTML部分

<!doctypehtml>
<html>
<ヘッド>
 <メタ文字セット='utf-8'>
    <script src="js/jquery.js"></script>
 <スタイル タイプ="text/css">
  a{テキスト装飾: なし;}
  表 {border-collapse:collapse;width: 100%;font-size: 14px;}
  th{背景色: #ddd;}
  テーブル、td、th {border:1px solid #e7e8ec;}
  th、tr{高さ: 40px;}
  td {テキスト配置: 中央;}
  tr:hover{背景色: #f9f4f3;}
  .barcon {幅: 1000px;マージン: 0 自動;テキスト配置: 中央;}
  .barcon2 {float: 右;}
  .barcon2 ul {マージン: 20px 0;パディング左: 0;リストスタイル: なし;テキスト配置: 中央;}
  .barcon2 li {表示: インライン;}
  .barcon2 a {font-size: 16px;font-weight: normal;display: inline-block;padding: 5px;padding-top: 0;color: black;border: 1px solid #ddd;background-color: #fff;}
  .barcon2 a:hover{背景色: #eee;}
  .ban {不透明度: .4;}
 </スタイル>
</head>
<本文>
<テーブル幅="950" セルパディング="0" セル間隔="0" クラス="table2" 配置="center">
 <頭>
 <tr align="center">
  <th width="150" height="33" class="td2">シリアル番号</th>
  <th width="300" class="td2">ユーザー名</th>
  <th width="250" class="td2">権限</th>
  <th width="250" class="td2">操作</th>
 </tr>
 </thead>
 <tbody id="myTable">
 <tr align="center">
  <td class="td2" height="33" width="150">1</td>
  <td class="td2">管理者</td>
  <td class="td2" >管理者</td>
  <td class="td2" ><a href="###" >変更</a></td>
 </tr>
 </tbody>
</テーブル>
<div id="barcon" class="barcon">
 <div id="barcon2" class="barcon2">
  <ul>
   <li><a href="###" id="prePage">前のページ</a></li>
   <li id="barcon1"></li>
   <li><a href="###" id="nextPage">次のページ</a></li>
   <li><input type="text" id="num" size="2" oninput="value=value.replace(/[^\d]/g,'')"></li>
   <li><a href="###" id="jumpPage" onclick="jumpPage()">ジャンプ</a></li>
  </ul>
 </div>
</div>
</本文>
</html>

2. JSロジック

<スクリプト>
     // データを初期化する function dynamicAddUser(num){
        (var i=1;i<=num;i++) の場合
        {
            var trNode = document.createElement("tr");
            $(trNode).attr("align","center");
            //シリアル番号 var tdNodeNum = document.createElement("td");
            $(tdNodeNum).html(i+1);
            tdNodeNum.style.width = "150px";
            tdNodeNum.style.height = "33px";
            tdNodeNum.className = "td2";
            //ユーザー名 var tdNodeName = document.createElement("td");
            $(tdNodeName).html("lzj"+i);
            tdNodeName.style.width = "300px";
            tdNodeName.className = "td2";
            //権限 var tdNodePri=document.createElement("td");
            tdNodePri.style.width = "250px";
            tdNodePri.className = "td2";
            var priText = document.createElement("span");
            $(priText).css({"display":"inline-block","text-align":"center"});
            $(priText).text("一般ユーザー");
            tdNodePri.appendChild(priText);
            //操作 var tdNodeOper = document.createElement("td");
            tdNodeOper.style.width = "170px";
            tdNodeOper.className = "td2";
            var editA = document.createElement("a");
            $(editA).attr("href", "###").text("編集");
            $(editA).css({ display: "インラインブロック" });
            tdNodeOper.appendChild(編集A);
 
            trNode.appendChild(tdNodeNum);
            trNode.appendChild(tdNodeName);
            trNode.appendChild(tdNodePri);
            trNode.appendChild(tdNodeOper);
            $("#myTable")[0].appendChild(trNode);
        }
    }
    $(関数(){
        動的ユーザー追加(80);
        ページを移動します(1,10);
    })
 
    /**
     * ページング機能 * pno - ページ番号 * psize - 1 ページあたりに表示されるレコード数 * ページング部分は実際のデータ行から始まるため、実際のレコード数を決定するために加算または減算する定数があります * 純粋な js ページングは​​実際にはすべてのデータ行をロードし、ページング機能は属性を表示することで完了します**/
    var pageSize=10;//ページあたりに表示される行数 var currentPage_=1;//現在のページのグローバル変数。ジャンプ時に同じページにあるかどうかを判断するために使用されます。同じページにある場合はジャンプせず、そうでない場合はジャンプします。
    var totalPage; //ページの総数 function goPage(pno,psize){
        var itable = document.getElementById("myTable");
        var num = itable.rows.length; //テーブル内のすべての行数(すべてのレコード数)
 
        pageSize = psize; //ページあたりの行数 //ページの総数 if (num/pageSize > parseInt(num/pageSize)) {
            合計ページ数 = parseInt(数値 / ページサイズ) + 1;
        }それ以外{
            totalPage=parseInt(数値/ページサイズ);
        }
        var currentPage = pno; //現在のページ番号 currentPage_=currentPage;
        var startRow = (現在のページ - 1) * ページサイズ + 1;
        var endRow = 現在のページ * ページサイズ;
        endRow = (endRow > num)? num : endRow;
 
        $("#myTable tr").hide();
        for(var i=startRow-1;i<endRow;i++) {
            $("#myTable tr").eq(i).show();
        }
 
        var tempStr = 現在のページ + "/" + 合計ページ;
        document.getElementById("barcon1").innerHTML = tempStr;
 
        現在のページ>1の場合{
            $("#firstPage").on("クリック",function(){
                ページを1に移動する(psize);
            }).removeClass("禁止");
            $("#prePage").on("クリック",function(){
                ページに移動します(現在のページ-1、psize);
            }).removeClass("禁止");
        }それ以外{
            $("#firstPage").off("click").addClass("ban");
            $("#prePage").off("click").addClass("ban");
        }
 
        現在のページ数 < 合計ページ数)
            $("#nextPage").on("クリック",function(){
                ページに移動します(現在のページ+1、psize);
            }).removeClass("禁止")
            $("#lastPage").on("クリック",function(){
                ページの合計数、ページサイズ。
            }).removeClass("禁止")
        }それ以外{
            $("#nextPage").off("click").addClass("ban");
            $("#lastPage").off("click").addClass("ban");
        }
    }
 
    関数jumpPage() {
        var num = parseInt($("#num").val());
        if(num != currentPage_ && !isNaN(num) && num <= totalPage && num > 0) {
            ページ番号を入力します。
        }
    }
</スクリプト>

効果は以下のようになります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • ページングクリックコントロールを実装するネイティブJS
  • シンプルなフロントエンドのページング効果を実現する js
  • ページングを実現するための純粋な JavaScript (2 つの方法)
  • 非常に優れたJSページング効果コード。研究する価値がある
  • js を使用して HTML テーブル ページング例を作成する (ページングを実装する js)
  • 純粋な js ページング コード (シンプルで実用的)
  • JSP ページング表示実装コード
  • div コンテンツを表示するための js ページング
  • JS で実装されたシンプルなページングの例
  • クールなページング効果を実現するネイティブJS

<<:  Win10 64 ビットで圧縮パッケージを使用して最新の MySQL 8.0.18 をインストールするチュートリアル (画像とテキスト付き)

>>:  docker に php-fpm サービス/拡張機能/構成をインストールする詳細なチュートリアル

推薦する

MySQL フルテキスト検索の中国語ソリューションとサンプルコード

MySQL 全文検索中国語ソリューション最近、会社のプロジェクトで、データベースで中国語を検索する機...

preタグを自動的に折り返すためのサンプルコード

pre 要素は、フォーマット済みのテキストを定義します。 pre 要素で囲まれたテキストでは、通常、...

この記事ではCSSボーダーの使い方を説明します

境界線のスタイルborder-style プロパティは、表示する境界線の種類を指定します。 bord...

Dockerを使用してPythonランタイム環境の基本イメージを作成する方法

1. 準備1.1 Pythonインストールパッケージをダウンロードします(注:Pythonバージョン...

Web プロジェクト開発 JS 機能の手ぶれ補正とスロットリングのサンプル コード

目次安定導入手ぶれ補正シーン1(マウスの動き込み)手ぶれ補正シーン2(キーボードのキー)関数のスロッ...

すべてのブラウザに対応したデータURIとMHTMLの完全なソリューション

データURI Data URI は、小さなファイルをドキュメントに直接埋め込むために RFC 239...

5 分で vue-cli3 を使用してプロジェクトを作成する方法を説明します (初心者向けガイド)

目次1. Vue環境を構築する2. Vue スキャフォールディングツール3. プロジェクトを作成する...

ボタンをクリックした後のCSS読み込み効果を実現する

自社製品にクリック後1~2秒待機時間があるボタン(確認メールを送信する)があるため、クリック後の1~...

Nginx で何ができるかの包括的な分析

序文この記事は、サードパーティのモジュールをロードせずにNginxで処理できることのみに焦点を当てて...

Docker-compose インストール yml ファイルの設定方法

目次1. オフラインインストール2. オンラインインストール3. アンインストール4. ymlファイ...

Ubuntu 20.04 Firefox でビデオを再生できない (Flash プラグインがない) 場合の解決策

1. Flashプラグインパッケージのダウンロードアドレス: https://get.adobe.c...

TypeScript 3.7 で注目すべき 3 つの新機能について簡単に説明します。

目次序文オプションの連鎖ヌル結合呼び出されていない関数のチェック他の序文TypeScript 3.7...

インラインブロックを使用した複数のdiv間の間隔はプログラミング方法とは異なります

inline-block について学習しているときに、境界線と inline-block を持つ複数...

Linux での MySQL 5.7.18 バイナリ パッケージのインストール チュートリアル (デフォルトの構成ファイル my_default.cnf なし)

現在、MySQL を学習中です。私は完全な初心者で、Linux についてはあまり知りません。今後の作...

div画像マーキーシームレス接続実装コード

コードをコピーコードは次のとおりです。 <html> <ヘッド> <ス...