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) {
            ページ番号を入力します。
        }
    }
</スクリプト>

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