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;
}

プレビュー: