jQuery はテーブルのページング効果を実装します

jQuery はテーブルのページング効果を実装します

この記事では、テーブルのページング効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

CS: ...

<スタイル>
    .ページャー{
        フォントサイズ: 18px;
    }
 
    .pager合計{
        フォントサイズ: 18px;
        高さ: 36px;
        行の高さ: 36px;
        左マージン: 2px;
    }
 
    .pager_a {
        表示: ブロック;
        幅: 36ピクセル;
        高さ: 36px;
        行の高さ: 36px;
        フロート: 左;
        テキスト配置: 中央;
        境界線: 1px 黒一色;
        色: 黒;
        左マージン: 2px;
        カーソル: ポインタ;
    }
 
    .pager_a_red {
        表示: ブロック;
        幅: 36ピクセル;
        高さ: 36px;
        行の高さ: 36px;
        フロート: 左;
        テキスト配置: 中央;
        境界線: 1px 実線の赤;
        色: 赤;
        フォントの太さ: 太字;
        左マージン: 2px;
        カーソル: ポインタ;
    }
</スタイル>

HTML:

<span class="pager"></span>&nbsp;<span class="pagerTotal"></span>
<テーブル>
<tr>
    <th>ブランド</th>
    <th>ショップ</th>
    <th>倉庫</th>
</tr>
<tbody id='tbody'></tbody>
</テーブル>
<span class="pager"></span>&nbsp;<span class="pagerTotal"></span>

JavaScript:

<スクリプト>
    // 初期化 $(function () {
        レポートページ(1);
    });
    //レポートの読み込み - ページング function ReportPage(pageIndex) {
        var index = pageIndex; //ページ番号 var size = 500; //ページあたりのエントリ数 var startDate = $("#startDate").val();
 
        $("tbody").empty();
        $.ajax({
            非同期: false、
            タイプ: "GET",
            データ: {
                "開始日": 開始日、
                "pageIndex": インデックス、
                "pageSize": サイズ、
            },
            url: "/Controller/GetData",
            データ型: "json",
            成功: 関数 (リクエスト) {
                //スペルテーブル$.each(request.data, function (i, field) {
                    var html = "";               
                    html += "<tr>";
                    html += "<td>" + field.brand+ "</td>";        
                    html += "<td>" + field.Shop+ "</td>";
                    html += "<td>" + field.warehouse+ "</td>";
                    html += "</tr>";
                    $("#tbody").append(html);
                });           
                Pages(pageIndex, request.allPage, request.total);//ページングを生成する},
        });
    }
 
    //ページングボタン関数 Pages(pageIndex, pageCount, pageTotal) {
        $(".pagerTotal").html("&nbsp;&nbsp;合計: <font color='red'>" + pageTotal + "</font>&nbsp;データ!");
        $(".pager").empty();
        var ページ = "";
        (var i = 0; i < pageCount; i++) の場合 {
            ((i + 1) == ページインデックス)の場合{
                ページ += "<span class='pager_a_red'>" + (i + 1) + "</span>";
            }
            それ以外 {
                ページ += "<span class='pager_a' onclick='ReportPage(" + (i + 1) + ")'>" + (i + 1) + "</span>";
            }
        }
        $(".pager").append(ページ);
    }
</スクリプト>

VC:

パブリック ActionResult GetData(文字列 startDate、int ページインデックス、int ページサイズ)
        {
                文字列 json = 文字列.Empty;          
                if (!string.IsNullOrEmpty(startDate))
                {
                    整数合計 = 0;
                    int allPage = 0;
                    DataTable dt = bll.GetData(startDate、pageIndex、pageSize、out total、out allPage);
                    dt != null && dt.Rows.Count > 1 の場合
                    {
                        json = JsonConvert.SerializeObject(新しい
                        {
                            total = total, //レコードの合計数 allPage = allPage, //ページの合計数 data = dt, //ページング後のデータ });
                    }
                }        
                Content(json) を返します。
        }

ページング データ dataTable、合計データ数 total、合計ページ数 allpage を取得します。

パブリック DataTable GetDate(文字列 startDate、int pageIndex、int pageSize、out int total、out int allPage)
{
    //データの合計数とページの合計数を計算します。 string sqlCount = "select count(*) from table where date='"+startDate+"'"; //データの合計数を取得します。 total = int.Parse(SqlHelper.GetSingel(sqlCount ).ToString()); //データ行の合計数 allPage = total / pageSize; //ページの合計数 = データ行の合計数 / ページあたりの行数 allPage += total % pageSize == 0 ? 0 : 1; //1 ページ未満も 1 ページとしてカウントされます。 //ページング データを取得します。 string sql = "";
    sql = "@PageIndex INT を宣言します;";
    sql = "@PageSize INT を宣言します;";
    sql = "SET @PageIndex=" + ページインデックス;
    sql = "SET @PageSize=" + ページサイズ;
 
    sql += " SELECT * FROM (SELECT ROW_NUMBER() OVER(ORDER BY ID desc) rownum, * FROM table where date ='"+ startDate +"')a";
    sql += " WHERE rownum > @PageSize * (@PageIndex - 1) AND rownum <= @PageSize * @PageIndex";
    sql += "ID desc で並べ替え";
 
    DataTable dt = SqlHelper.GetDate(sql);// ページングデータ return dt;
}

プレビュー:

ページ番号をクリックすると、新しいデータを取得するために ajax が再度呼び出されます。

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

以下もご興味があるかもしれません:
  • jQueryプラグインDataTablesページングの開発経験
  • jQuery DataTables を使用して Asp.net MVC でデータ ページング表示機能を実装する
  • jQuery DataTableは前面と背面に動的なページングを実装します
  • jQuery dataTable のバックグラウンドでのデータの読み込みとページングのサンプル コード
  • jQuery DataTable サーバーサイドページング
  • ASP.NET MVC+EF サーバー側ページングに jqGrid と jquery Datatables を使用する際の注意事項
  • jQuery DataTables プラグインのカスタム Ajax ページング例の分析
  • クライアント/サービス分離リンクモデルを構築するための JQuery のテーブルページングコードの効率に関する予備調査

<<:  MySQLクエリキャッシュに関するヒント

>>:  分散監視システムにおけるZabbixのアクティブ、パッシブ、Web監視のプロセスの詳細な説明

推薦する

vscodeを使用してuniappを開発する方法

私はフロントエンド プロジェクトの開発に常に vscode を使用してきたため、現在ではいくつかの小...

Linux で nginx を起動および再起動する方法

Nginx (エンジン x) は、IMAP/POP3/SMTP サービスも提供する高性能 HTTP ...

React のクラスからフックへの移行

目次リアクトフック序文なぜフックなのか?クラス関数クラスとフックの比較フックはコンポーネントの状態を...

MySQL/MariaDB でピボット テーブルを実装する方法のサンプル コード

前回の記事では、Oracle でピボット テーブルを実装するいくつかの方法を紹介しました。今日は、同...

ファイル書き込みを使用して Linux アプリケーションをデバッグする方法

Linux ではすべてがファイルなので、Android システム自体は Linux + Java だ...

Dockerイメージ内のnoneイメージ操作を削除する

普段はdocker buildコマンドでイメージを生成していますが、コードの更新が頻繁に行われるとn...

Mysql 自己結合クエリ例の詳細な説明

この記事では、Mysql の自己結合クエリについて説明します。ご参考までに、詳細は以下の通りです。自...

ボタンをEnterキーに関連付けるjsコード

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

MySQLでスケジュールされたタスクを設定する方法の分析

この記事では、例を使用して、MySQL でスケジュールされたタスクを設定する方法について説明します。...

JavaScript のコールバック関数の理解と使用

目次概要コールバックまたは高階関数とは何ですか?コールバック関数はどのように機能しますか?コールバッ...

Vueのライブ放送機能の詳しい説明

最近、会社でたまたま生放送をしていたのですが、今日は私が遭遇した落とし穴を記録します。会社のサーバー...

docker を使って sonarqube を構築する方法

目次1. Dockerをインストールする2. ソナーイメージをインストールする3. ソナーを使ってコ...

CPU、マシンモデル、メモリなどの情報を表示するLinuxシステム

システムメンテナンス中は、いつでも CPU 使用率を確認し、対応する情報に基づいてシステムの状態を分...

Vue プラグイン エラー: このページで Vue.js が検出されました。問題は解決しました

Vue プラグインがエラーを報告しました: このページで Vue.js が検出されましたVueプラグ...

CSS の clip-path プロパティの使用方法の詳細な説明

クリップパスの使用ポリゴン値は複数の座標点で構成されます。最初の値は x 方向、2 番目の値は y ...