ブートストラップを使用して表を表示およびソートしています。テーブル内の各ヘッダーに一時的な矢印(または何か)を実装して、どの方向にソートされているかを示すことができるかどうかを考えていました。
回答 2 件
編集:アイコンを使ってテーブルを並べ替える必要があると仮定します。
これは動的な動作であるため、純粋なHTML/CSSでこれを行うことはできません。JavaScriptを使用する必要があります。これを実現するために行う一般的な手順は次のとおりです。
JavaScript変数内にすべてのテーブル行を保存する
<th>
の中 、<span>
のような別の要素を配置します または<img>
矢印画像が含まれています。表の行の配列を並べ替えるクリックハンドラーを矢印に接続します
配列を並べ替えた後、DOM API関数を使用して古いテーブルを削除し、新しいテーブルを作成して、その場所に新しいテーブルを挿入します。ブートストラップは通常jQueryで使用されるため、いくつかのjQuery関数を調べてテーブルを削除し、新しいテーブルを作成して(行を調べて)、古いテーブルの代わりに作成したテーブルをページにレンダリングできます。
これを行うさまざまなライブラリがありますが、自分で実行することでより簡単に実現できます。
関連した質問
- グリッドレイアウトに関係なくボタンを配置しますbootstrap4
- さまざまなサイズのカード用のブートストラップ5レイアウト:Pinterestのように
- ブートストラップ:モバイルビューでボタンをテキストボックスと同じ幅にする方法は?
- CSSを使用してカードのサイズを変更する方法
- aspnetコアで背景画像を正しく表示できませんでした
- HTMLでSVGパスを反転する方法は?
- Bootstrap list-groupを使用して、中程度のブレークで水平に移動します
- mvcのビューでhtmlhref内に変数を渡す方法
- foreachの2つの異なるラジオボタンが1つとして機能
- 異なる行>画面サイズによる列配置(ブートストラップ)
はい、これは可能です。ヘッダーには、次を追加します...