web-dev-qa-db-ja.com

Twitterのjavascriptデータテーブルbootstrap

DataTables.js（ http://datatables.net ）をTwitter bootstrapライブラリを使用するアプリと統合しようとしています。DataTableは統合されていないようです。 Twitterのブートストラップでうまく機能します。cssまたはjsが競合しているかどうかはわかりません。

DataTables.jsをTwitterBootstrapと統合するにはどうすればよいですか？ Twitter Bootstrapでうまく機能する他のデータテーブルライブラリはありますか？

javascriptdatatablestwitter-bootstrap
18
ed1t

BootstrapとDataTablesを統合して、フル機能のDataTablesがサイトの他の部分と同じルックアンドフィールに一致するようにするのは、実際には非常に簡単です。リンクは次のとおりです： http： //datatables.net/blog/Twitter_Bootstrap

For Bootstrap v2.xx： http://datatables.net/blog/Twitter_Bootstrap_2

19
Fabien Barbier

Bootstrap 3の場合、これを使用します プラグイン 。

DataTablesプラグイン

このリポジトリには、jQueryDataTablesテーブルエンハンサーのプラグインのコレクションが含まれています。これらのプラグインは、DataTablesライブラリの機能を強化し、追加の並べ替えアルゴリズム、APIメソッド、ページ付けコントロールなどのコア機能に追加のオプションを追加します。プラグインを、DataTablesに機能を追加するより重要なソフトウェアライブラリであるDataTablesの「エクストラ」と混同しないでください。

3
GalacticJello

解決

  • Download Builder を使用してJS/CSSファイルへのリンクを生成し、BootstrapスタイリングとTwitter Bootstrapライブラリ（必要な場合））を含めます。

  • 生成されたJS/CSSリンクをプロジェクトに含めます。

  • クラスを使用するtable table-striped table-bordered あなたのための <table>以下に示すように：

    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">

デモ

コードとデモンストレーションについては、 this jsFiddle を参照してください。

0
Gyrocode.com