この記事の例では、フロントエンドのページング効果を実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Win10 64 ビットで圧縮パッケージを使用して最新の MySQL 8.0.18 をインストールするチュートリアル (画像とテキスト付き)
>>: docker に php-fpm サービス/拡張機能/構成をインストールする詳細なチュートリアル
目次1.DB、DBMS、SQL 2. データベースの特徴3. SQL分類4. MySQLを起動および...
序文最近は、PC、iPad、携帯電話、スマートウォッチ、スマートテレビなど、さまざまなデバイスが存在...
コアSQL文数字を含まない MySQL クエリ ステートメント: SELECT * FROM tes...
目次1. 内閣府1. コンセプト2. MHAの構成3. MHAの特徴2. MySQL+MHAをビルド...
Innodbには以下のコンポーネントが含まれています1. innodb_buffer_pool:これ...
1. オンラインインストール現在、Linux x86アーキテクチャのオンラインインストールのみを試し...
目次序文1. 現在の時刻を取得する1.1 現在の日付と時刻を返す1.2 現在の日付を取得する1.3 ...
序文SpringBoot + Vueのフロントエンドとバックエンドを分離したプロジェクトをどのように...
文法規則 列名を選択 テーブル名1から INNER JOIN テーブル名2 ON テーブル名1.列名...
yum クイックインストール mysql yumリポジトリを追加する rpm -Uvh http:...
[mysqlカーソルの使い方と機能]例:現在、テーブル A、B、C の 3 つのテーブルがあります。...
MySQL 8.0.12のインストールと使用のチュートリアルを録画しました。ウィンドウズまず、公式ウ...
目次コードの最適化v-for でキーを使用するv-if/v-else-if/v-else でキーを使...
この記事では、Docker コンテナとフロントエンド プロセスの関係と、コンテナを永続的に実行できる...
Dockerfileの作成expressによって自動的に作成されたディレクトリを例にとると、ディレク...