asp.net - WebGrid ページャーのスタイリング

Question

WebGrid Pager にスタイリングを適用する方法はありますか?

私が見つけた唯一の方法は、クライアント側から Jquery コードを書くことですが、少し汚いようです。

この GridHelper に css を提供する通常の方法はありますか?

Answer 1

ページャー内のリンクのスタイリングには、通常どおり CSS を使用できます。CSS セレクターを介してリンクを識別できることを確認する必要があるだけです。Pager 呼び出しを識別可能な要素に配置すると、これは非常に簡単です。

<div id="pager">
    @grid.Pager()
</div>

これで、スタイリングのリンクにアクセスできます。

#pager a {
    color: pink;
    text-decoration: none;
}
#pager a:hover {
    color: green;
    text-decoration: underline;
}

Answer 2

cssで簡単です。

フッターのスタイルをtable-pager

@grid.GetHtml(
  mode: WebGridPagerModes.All,
  columns: gridColumns,
  tableStyle: "table table-striped table-condensed table-responsive table-hover",
  rowStyle: "table-row-clickable",
  footerStyle: "table-pager"
)

このcssを追加します：

.table-pager > td {
  padding-top: 10px;
}

  .table-pager > td > a {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px 7px;
  }

  .table-pager > td > a:hover {
    background-color: #f0f0f0;
  }