ブートストラップベースのライトウェイトテーブルプラグインブートストラップテーブルは、固定テーブルヘッダー、シングル/チェック、ソート、ページング、検索、カスタムテーブルヘッダーなどの強力な機能を備えています。
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つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記は、あなたと共有されるブートストラップテーブルの使用方法です。ブートストラップテーブルの使用方法を習得することが役立つことを願っています。