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 学習データベースバックアップの詳細な説明

目次1.DB、DBMS、SQL 2. データベースの特徴3. SQL分類4. MySQLを起動および...

PC/Pad/Phoneデバイスに自動的に適応するCSSウェブページレスポンシブレイアウト

序文最近は、PC、iPad、携帯電話、スマートウォッチ、スマートテレビなど、さまざまなデバイスが存在...

MySQLクエリは、フィールドが数値とカンマではないことを指定します。

コアSQL文数字を含まない MySQL クエリ ステートメント: SELECT * FROM tes...

MySQL 高可用性クラスタの展開とフェイルオーバーの実装

目次1. 内閣府1. コンセプト2. MHAの構成3. MHAの特徴2. MySQL+MHAをビルド...

MySQL InnoDB の重要なコンポーネントの概要

Innodbには以下のコンポーネントが含まれています1. innodb_buffer_pool:これ...

さまざまな環境での Docker Compose のインストール方法

1. オンラインインストール現在、Linux x86アーキテクチャのオンラインインストールのみを試し...

Mysqlの日付と時刻関数を扱う記事

目次序文1. 現在の時刻を取得する1.1 現在の日付と時刻を返す1.2 現在の日付を取得する1.3 ...

SpringBoot + Vue プロジェクトを Linux サーバーにデプロイするための詳細なチュートリアル

序文SpringBoot + Vueのフロントエンドとバックエンドを分離したプロジェクトをどのように...

MySQL 内部結合の使用例 (必読)

文法規則 列名を選択 テーブル名1から INNER JOIN テーブル名2 ON テーブル名1.列名...

Alibaba Cloud CentOS 7 に yum を使用して MySQL をインストールする正しい方法 (推奨)

yum クイックインストール mysql yumリポジトリを追加する rpm -Uvh http:...

MySQLカーソルの使い方と機能の詳細な説明

[mysqlカーソルの使い方と機能]例:現在、テーブル A、B、C の 3 つのテーブルがあります。...

MySQL 8.0.12 のインストールと使用方法のチュートリアル

MySQL 8.0.12のインストールと使用のチュートリアルを録画しました。ウィンドウズまず、公式ウ...

22 Vue 最適化のヒント (プロジェクトの実践)

目次コードの最適化v-for でキーを使用するv-if/v-else-if/v-else でキーを使...

Dockerコンテナの自動終了を停止する方法の詳細な説明

この記事では、Docker コンテナとフロントエンド プロセスの関係と、コンテナを永続的に実行できる...

Dockerはdockerfileを使用してnode.jsアプリケーションを起動します

Dockerfileの作成expressによって自動的に作成されたディレクトリを例にとると、ディレク...