この記事では、テーブルのページング効果を実現するための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> <span class="pagerTotal"></span> <テーブル> <tr> <th>ブランド</th> <th>ショップ</th> <th>倉庫</th> </tr> <tbody id='tbody'></tbody> </テーブル> <span class="pager"></span> <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(" 合計: <font color='red'>" + pageTotal + "</font> データ!"); $(".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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: 分散監視システムにおけるZabbixのアクティブ、パッシブ、Web監視のプロセスの詳細な説明
私はフロントエンド プロジェクトの開発に常に vscode を使用してきたため、現在ではいくつかの小...
Nginx (エンジン x) は、IMAP/POP3/SMTP サービスも提供する高性能 HTTP ...
目次リアクトフック序文なぜフックなのか?クラス関数クラスとフックの比較フックはコンポーネントの状態を...
前回の記事では、Oracle でピボット テーブルを実装するいくつかの方法を紹介しました。今日は、同...
Linux ではすべてがファイルなので、Android システム自体は Linux + Java だ...
普段はdocker buildコマンドでイメージを生成していますが、コードの更新が頻繁に行われるとn...
この記事では、Mysql の自己結合クエリについて説明します。ご参考までに、詳細は以下の通りです。自...
コードをコピーコードは次のとおりです。 <html> <ヘッド> <ス...
この記事では、例を使用して、MySQL でスケジュールされたタスクを設定する方法について説明します。...
目次概要コールバックまたは高階関数とは何ですか?コールバック関数はどのように機能しますか?コールバッ...
最近、会社でたまたま生放送をしていたのですが、今日は私が遭遇した落とし穴を記録します。会社のサーバー...
目次1. Dockerをインストールする2. ソナーイメージをインストールする3. ソナーを使ってコ...
システムメンテナンス中は、いつでも CPU 使用率を確認し、対応する情報に基づいてシステムの状態を分...
Vue プラグインがエラーを報告しました: このページで Vue.js が検出されましたVueプラグ...
クリップパスの使用ポリゴン値は複数の座標点で構成されます。最初の値は x 方向、2 番目の値は y ...