19

Bootstrap 3.0 を使用して、ヘッダー、アイテム、フッターは既に完了していますが、ページャーは使用していません。

ASP.NET Gridview ページャー スタイルで Bootstrap ページネーションを実装する方法を教えてください。

助けてください！

追加情報：：：

CssClass を追加してこれまでに行ったことを次に示します。Bootstrap スタイルを適用した完璧なテーブル ディスプレイ。

<div class="table-responsive">
        <asp:GridView ID="grdSearchAgreement" runat="server" CssClass="table table-hover"
            GridLines="None" AllowPaging="true" PageSize="2">
        </asp:GridView>
    </div>

ASP.NET GridView から生成されたページング スタイルを次に示します。テーブル構造tr tdです。

<tr>
        <td colspan="7"><table>
            <tr>
                <td><span>1</span></td><td><a href="javascript:__doPostBack(&#39;ctl00$body$grdSearchAgreement&#39;,&#39;Page$2&#39;)">2</a></td><td><a href="javascript:__doPostBack(&#39;ctl00$body$grdSearchAgreement&#39;,&#39;Page$3&#39;)">3</a></td>
            </tr>
        </table></td>
    </tr>

ただし、Bootstrap 3.0 Pagination Document を参照してください。スタイルは ul li にのみ適用できます。https://getbootstrap.com/docs/3.3/components/#pagination

    <ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

gridview から生成される tr td ページャーを ul li に変更するにはどうすればよいですか??

4

9 に答える 9

1

Bootsrap ページネーションは静的です。グリッドビューのレコード数に応じてページャー要素が生成されるように、グリッドビューに追加するには動的にする必要があります。動的にするには、jquery コードを記述する必要があります。最善の方法は、Bootpagなど、利用可能な多くの jquery プラグインから 1 つを使用することです。

ASP.NET GridView で Bootstrap ページネーションを使用する方法の典型的な例を次に示します。

于 2013-11-02T11:27:03.820 に答える
1

iYazee6 の結果により、グリッドで表示の問題が発生します。ページャーを保持するためにグリッドの最初の列のみを使用していますが、6 列のグリッドの場合、html は colspan="6" です。理由がわかりません。GridPager css の拡張ソリューションは素晴らしいです。それに応じて色を変更するために、Bootstrap ie GridPager-info OR GridPager-Danger OR GridPager-Success のように使用する css を追加しました。

CSS スニペットは次のとおりです。

/***** GridPager-Danger *****/

.GridPager-Danger a,
.GridPager-Danger span {
    border: solid 1px #C60C30;
    background: #e9e9e9;
    color: #717171;
    
}

.GridPager-Danger a {
    background-color: #f5f5f5;
    color: #C60C30;
    border: 1px solid #C60C30;
}

.GridPager-Danger a:hover {
    background-color: #C60C30;
    color: #f5f5f5;
}

.GridPager-Danger span {
    background: #C60C30;
    color: #f0f0f0;
}



/***** GridPager-Success *****/

.GridPager-Success a,
.GridPager-Success span {
    border: solid 1px #3c763d;
    background: #eeffcc;
    color: #717171;
    
}

.GridPager-Success a {
    background-color: #eeffcc;
    color: #3c763d;
    border: 1px solid #3c763d;
}

.GridPager-Success a:hover {
    background-color: #3c763d;
    color: #f5f5f5;
}

.GridPager-Success span {
    background: #3c763d;
    color: #f0f0f0;
}

この css を GridPager css と共に GridPager.css ファイルにコピーし、このコードを html に追加するだけです。

<PagerStyle HorizontalAlign = "Center" CssClass="GridPager GridPager-Info" />

OR

<PagerStyle HorizontalAlign = "Center" CssClass="GridPager GridPager-Success" />

OR

<PagerStyle HorizontalAlign = "Center" CssClass="GridPager GridPager-Danger" />

Bootstrapを使用している人に役立つかもしれません

于 2017-01-25T14:47:46.570 に答える