ブートストラップベースのライトウェイトテーブルプラグインブートストラップテーブルは、固定テーブルヘッダー、シングル/チェック、ソート、ページング、検索、カスタムテーブルヘッダーなどの強力な機能を備えています。
1。プラグインの説明：ブートストラップテーブルデータテーブル形式を表示し、リッチサポート、ラジオボックス、チェックボックス、ソート、ページングなど、プラグインのダウンロードを提供します。
2。機能：
Bootstrap 3に基づいて開発されました（Bootstrap 2もサポートされています）
レスポンシブインターフェイス
固定ヘッダー
完全に構成可能
サポートデータ属性
列を表示/非表示にします
テーブルヘッダーを表示/非表示にします
AJAXを使用してJSONデータを取得します
テーブルヘッダーをクリックして、単純にソートします
カスタム列ディスプレイをサポートします
シングル/再選択をサポートします
強力なページング機能
名刺レイアウトをサポートします
多言語をサポートします
3。使用方法：
1）HTMLページのヘッドタグにBootstrapライブラリ（まだ使用されていない場合）とBootstrap-Table.cssを紹介します。
<link rel = "styleSheet" href = "bootstrap.min.css"> <link rel = "styleSheet" href = "bootstrap-table.css">
2）jQueryライブラリ、ブートストラップライブラリ（プロジェクトがまだ使用されていない場合）、およびbootstrap-table.jsを紹介します。
<script src = "jquery.min.js"> </script> <script src = "bootstrap.min.js"> </script> <scrip = "bootstrap-table.js"> </script>
3）データソースを指定します。ここに2つの方法があります
方法1：データ属性タグを渡します
Data-Toggle = "Table"を通常のテーブルで設定すると、JavaScriptを作成せずにBootstrapテーブルを有効にします。
<table data-toggle = "table" data-url = "data.json"> <tead> ... </tead> </table>
方法2： JavaScriptを介してデータソースを設定します
JavaScriptを介してID属性を備えたテーブルを有効にします。
$（ '＃table'）。bootstraptable（{url： 'data.json'}）;：4。バグの説明：
タグ属性メソッドを使用してフィールドフォーマッタを設定すると、効果がなく、画像が不明であることがわかりました。調査の例を直接ダウンロードして、アドレスをダウンロードできます。
例：<th data-field = "sex" data-formatter = "format_sex"> gender </th>
1）理由：
bootstrap-table.js行399、フォーマッタタイプのみがコード内の関数です。
2）解決策：
399行目のコードブロックを変更します。
変更前
if（typeof that.header.formatters [j] === 'function'）{value = that.header.Formatters [j]（value、item）;}変更後：
if（typeof that.header.Formatters [j] === 'function'）{value = that.header.Formatters [j]（value、item）; } else if（typeof that.header.formatters [j] === 'string'）{if（typeof [that.header.formatters [j]] === 'function'）{value = window [that.header.formatters [j]]（value、item）; }}それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記は、あなたと共有されるブートストラップテーブルの使用方法です。ブートストラップテーブルの使用方法を習得することが役立つことを願っています。