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監視のプロセスの詳細な説明

推薦する

MySQL 5.7.18のインストール方法とMySQLサービスの起動手順の詳細な説明

MySQL は非常に強力なリレーショナル データベースです。しかし、初心者の中には、インストールや設...

JavaScript 定期検証パスワード強度実装方法

展示する デザインパスワード強度分析パスワードは数字、文字、特殊記号で構成されていますパスワード: ...

Nginx proxy_redirect の使用方法の詳細な説明

今日、Apache の nginx リバース プロキシを実行していたときに、ちょっとした問題に遭遇し...

MySQL の current_timestamp の落とし穴とその解決策を共有する

目次MySQL の current_timestamp の落とし穴エラーを報告する私の解決策mysq...

JS は Web ページナビゲーションバーの特殊効果を実現します

この記事では、ネイティブ JS を使用して実装された実用的な Web ナビゲーション バー効果を紹介...

Node.js コンソールで強調表示されたコードを印刷する方法

序文コードを実行してエラーが発生すると、エラーが出力されます。エラーにはスタック情報が含まれており、...

ノードにおけるhttpモジュールの使用と実行プロセス

ノードにおけるhttpの役割は何ですか? httpモジュールの役割は、サーバーの作成と記述を支援する...

Linux システムの /etc/fstab ファイルの詳細な解釈

序文 [root@localhost ~]# cat /etc/fstab # #/etc/fsta...

プロセスごとにネットワーク帯域幅を監視する Linux ツール Nethogs のインストールと展開

概要Linux 用のオープン ソース ネットワーク監視ツールは数多くあります。たとえば、帯域幅の使用...

MyBatis 動的 SQL の包括的な説明

目次序文動的SQL 1. まずモジュールのディレクトリ構造を見てみましょう2. 物理モデリングと論理...

Docker の win ping 失敗コンテナ回避ガイド

win docker-desktopを使ってコンテナ開発に接続し、ネットワーク上で色々試してみたいと...

Vue で SuperMap を使用する練習

目次序文関連資料Vue プロジェクトが 2 次元ハイパーグラフを導入ハイパーグラフ 2D ケース引用...

Vueドロップダウンメニューのコンポーネント開発の詳細説明

この記事の例では、Vueドロップダウンメニューのコンポーネント開発の具体的なコードを参考までに共有し...

要素テーブルからヘッダーを削除する方法

show-header属性を使用したドキュメントのヒントshow-header <el-テーブ...

Webデザインの経験: Webコードを効率的に書く

本来、この第 7 章では、デザインにおけるレイヤーと空間テクニックについて深く議論するはずです。しか...