jquery?: Bootstrap Table お試せた

うん、いい感じ。

Bootstrap Table お試せた

ファーストお試せた

Bootstrap table。フリー、オープン、かな。GitHub で管理されてて Donate 言うてるということは。

name members score dropped votes kurtosis skew
3月のライオン 第2シリーズ 47819 8.78 0.5 -0.86397 0.94986
アグレッシブ烈子 10390 7.49 8.1 -0.72291 0.73413
アイカツスターズ! 7637 7.35 8.0 -1.26476 0.38567
ボールルームへようこそ 96372 8.37 4.1 -0.97778 0.79052
ブラッククローバー 155697 6.57 8.9 -0.60210 0.60693
ブレンド・S 101063 7.66 2.4 -0.61915 0.87345
BORUTO -NARUTO NEXT GENERATIONS- 168005 7.25 6.0 -0.73602 0.70465
CARDFIGHT!! ヴァンガードG Z 1498 6.91 5.0 0.52320 1.10706
ちびまる子ちゃん 1510 7.39 20.8 -1.47405 0.23226
「映画 中二病でも恋がしたい! -Take On Me-」ミニドラマ『公開直前の・・・回顧劇場』 2825 7.28 0.6 3.69334 2.22016
シンデレラガールズ劇場 第2期 3699 6.74 2.4 -0.74577 0.74099
클로저스 : SIDE BLACKLAMBS 8705 7.08 2.9 -1.19092 0.36578
Code:Realize ~創世の姫君~ 37633 6.58 10.0 -1.19859 0.47130
クレヨンしんちゃん 31675 7.73 25.3 -1.60955 0.32466
名探偵コナン 143707 8.25 15.3 -1.60830 0.44326
ドラえもん (2005) 4211 7.59 19.3 -1.51141 0.28359
ドラゴンボール超(スーパー) 194417 7.49 7.4 -1.41126 0.38350
Fate/Apocrypha 133541 7.24 5.3 -0.80583 0.71288
Fate/Grand Order 2832 7.2 2.0 -0.74735 0.50660
牙狼<GARO>-VANISHING LINE- 27766 7.18 6.0 -0.43851 0.93555
銀魂。ポロリ編 39172 8.91 1.0 2.73799 1.98536
グランクレスト戦記 13261 7.54 0.1 1.02438 1.35002
ぐでたま 3986 7.36 7.2 -0.84210 0.65240
ガンダムビルドファイターズ バトローグ 2685 7.05 2.5 -0.15968 1.03766
干物妹!うまるちゃんR 67857 7.62 2.0 -0.84587 0.74367
一人之下 THE OUTCAST 2ndシーズン 4552 7.33 0.7 0.55757 1.19888
鬼灯の冷徹 第弐期 15378 7.84 1.5 -0.72416 0.79038
宝石の国 49118 8.09 3.2 -1.40338 0.54934
狐妖小红娘 南国 747 7.17 2.3 -0.96033 0.68612
アイドリッシュセブン 5335 7.61 1.5 -1.44009 0.47774
アイドルタイムプリパラ 2044 6.74 7.5 -1.19714 0.22334
妹さえいればいい。 75524 7.3 5.0 -0.51241 0.85977
イナズマイレブン アウターコード 2029 7.29 4.7 -1.16412 0.36764
いぬやしき 135552 8.04 2.1 -0.73322 0.81472
いつだって僕らの恋は10センチだった。 33686 7.63 1.1 -0.93216 0.70778
Just Because! 99534 7.41 3.9 -0.74432 0.79712
十二大戦 113288 6.83 3.8 -0.05564 1.06350
血界戦線 & BEYOND 105672 8.12 0.8 -0.62419 0.85649
キノの旅 -the Beautiful World- 68082 7.61 3.4 -0.54178 0.91322
キラキラ☆プリキュアアラモード 3940 7.03 6.7 0.17282 0.96882
きららファンタジア 2551 6.73 1.4 0.96015 1.33100
このはな綺譚 43814 7.63 6.1 -0.86979 0.69823
クジラの子らは砂上に歌う 53220 7.52 3.5 -0.77245 0.76101
ラブライブ!サンシャイン!! 第2期 33486 7.96 1.4 -1.22801 0.53958
まじかるすいーとプリズム・ナナ 7483 6.98 0.8 -0.20120 1.00957
魔法陣グルグル 14381 7.95 6.2 -0.90939 0.67262
魔法使いの嫁 217983 8.57 1.1 -1.22983 0.75206
機動戦士ガンダムTHE ORIGIN 24134 8.4 1.4 -0.70686 0.93719
夏目友人帳 陸 特別編 8970 8.53 0.5 -1.34910 0.71195
ネト充のススメ 117606 7.94 1.7 -0.26062 1.01016
忍たま乱太郎 2898 7.16 25.3 -0.26499 0.81032
ONE PIECE 650855 8.55 11.4 0.28584 1.19903
おそ松さん 第2期 22734 8.04 2.3 -1.53187 0.45047
ピングー in ザ・シティ 19410 8.48 13.3 4.79744 2.57444
ポケットモンスター サン&ムーン 23849 7.05 10.4 -0.36163 0.90995
全职法师 第2季 10203 6.75 3.0 -0.47575 0.81401
進撃の巨人 LOST GIRLS 42376 8.36 0.1 -1.04346 0.74968
食戟のソーマ 餐ノ皿 165392 8.57 0.5 -1.15974 0.77495
少女終末旅行 73985 7.98 3.4 -0.84580 0.70516
将国のアルタイル 33452 7.33 13.0 -0.97969 0.45099
ザ・キング・オブ・ファイターズ デスティニー 1052 6.76 3.5 0.62359 1.09040
アイドルマスター SideM 8613 7.34 4.8 -1.22804 0.37292
東方二次創作同人アニメ 夢想夏郷 21916 7.12 4.0 -0.27501 0.90735
トリック・オア・アリス 5697 7.11 1.0 2.29177 1.75051
UQ HOLDER! ~魔法先生ネギま!2~ 49457 7.16 3.1 -0.46831 0.85406
宇宙戦艦ヤマト2202 愛の戦士たち 6536 8.17 0.9 -1.14163 0.75176
ヴァイオレット・エヴァーガーデン 135847 8.91 0.1 3.86807 2.30219
妖怪アパートの幽雅な日常 31699 6.9 12.6 -0.64550 0.73246
妖怪ウォッチ 10426 6.81 16.7 -0.70847 0.59279
結城友奈は勇者である -鷲尾須美の章- 17278 7.61 2.4 -0.84375 0.76824
結城友奈は勇者である -勇者の章- 15704 7.84 0.4 -1.51219 0.42116
遊戯王VRAINS 13812 6.89 8.5 -0.03661 0.96425

というかそもそもFancyGridをお試そうとした際に考えた「動的にグラフを作る」のは諦めて、data URIs の形で画像を埋め込んでるので、「FancyGrid、うーん」の一つ(グラフ連携がうまくいかん)を解決したくて Bootstrap table たのではなくて。

何してるかはソースの表示でみてちょ、と言うだけだと今の場合ボリューミーなので…。Getting started 見ながらやればすぐに出来るよ。今ワタシがやったのは Via data attributes のパターンね。

ドキュメントが、「慣れれば」という前提付きで滅茶苦茶親切丁寧に書いてあるので非常に印象が良い。結構日常使いにいいんじゃないかなという気がしてる。(ほかのものも調べ中ではあるけれど、いったんこれを使い続けてみようと思う。)

追記: data URIs と jquery lazy load の相性が悪い

Bootstrap Table そのものの話とは全然関係ないが、data URIs と jquery lazy load の相性が悪いか…。暫定的に WordPress の lazy load プラグインを止めることにする。

追記: Toolbar (data-search)

あまりに「ファーストお試せた」に過ぎるので、こんなんもでけますよーもちっとはないと、ヲ、とは思わんだろうなぁと思ったので、Toolbar なお試し:

name members score dropped (%) score vs votes < 8 + dropped kurtosis skew
銀魂。ポロリ編 39657 8.95 1.0 5.1 1.8704 1.7263
ヴァイオレット・エヴァーガーデン 137364 8.91 0.1 0.3 3.8516 2.2974
3月のライオン 第2シリーズ 48409 8.79 0.5 2.3 -0.8579 0.9537
魔法使いの嫁 220370 8.57 1.1 4.1 -1.2326 0.7531
食戟のソーマ 餐ノ皿 167685 8.56 0.5 6.3 -1.1311 0.7841
ONE PIECE 651695 8.55 11.4 21.7 0.2858 1.1990
夏目友人帳 陸 特別編 9038 8.53 0.5 3.7 -1.3496 0.7123
宝石の国 52394 8.48 3.1 8.8 -1.2310 0.6914
ピングー in ザ・シティ 19404 8.48 13.5 23.2 4.7957 2.5739
機動戦士ガンダムTHE ORIGIN 24172 8.4 1.4 5.6 -0.7114 0.9348
ボールルームへようこそ 97035 8.37 4.1 11.6 -0.9738 0.7922
進撃の巨人 LOST GIRLS 42830 8.35 0.2 1.0 -1.1796 0.6864
名探偵コナン 143850 8.25 15.3 25.4 -1.6082 0.4434
宇宙戦艦ヤマト2202 愛の戦士たち 6573 8.17 0.9 2.4 -1.1385 0.7515
血界戦線 & BEYOND 108074 8.16 0.8 6.0 -0.4199 0.9620
少女終末旅行 75546 8.12 3.5 10.2 -0.8934 0.7191
いぬやしき 138784 8.03 2.2 11.6 -0.7430 0.8072
おそ松さん 第2期 22845 8.03 2.4 7.2 -1.5166 0.4511
魔法陣グルグル 14474 7.96 6.2 15.0 -0.8923 0.6827
ラブライブ!サンシャイン!! 第2期 33698 7.95 1.5 7.4 -1.2570 0.5244
ネト充のススメ 119669 7.94 1.7 15.6 -0.2546 1.0131
鬼灯の冷徹 第弐期 15526 7.85 1.6 6.3 -0.7352 0.7879
結城友奈は勇者である -勇者の章- 15832 7.85 0.4 3.2 -1.4721 0.4318
クレヨンしんちゃん 31697 7.73 25.3 36.8 -1.6105 0.3242
ブレンド・S 105488 7.71 2.4 15.4 -0.4548 0.9706
このはな綺譚 44371 7.65 6.3 18.1 -0.8551 0.7170
いつだって僕らの恋は10センチだった。 34450 7.61 1.1 5.6 -0.9478 0.6855
結城友奈は勇者である -鷲尾須美の章- 17410 7.61 2.4 13.2 -0.8436 0.7678
アイドリッシュセブン 5367 7.6 1.6 4.3 -1.3972 0.5028
ドラえもん (2005) 4216 7.59 19.3 31.7 -1.5032 0.2905
干物妹!うまるちゃんR 68920 7.59 2.1 11.8 -0.6218 0.8853
キノの旅 -the Beautiful World- 69054 7.59 3.5 14.2 -0.5272 0.9386
グランクレスト戦記 13632 7.51 0.1 0.4 0.5469 1.2005
アグレッシブ烈子 10395 7.49 8.1 21.1 -0.7196 0.7351
ドラゴンボール超(スーパー) 194973 7.49 7.4 25.7 -1.4117 0.3835
クジラの子らは砂上に歌う 53569 7.49 3.7 10.4 -0.7703 0.7597
Just Because! 100294 7.42 3.9 10.9 -0.7589 0.7882
将国のアルタイル 33771 7.4 13.0 23.6 -0.9806 0.4934
ちびまる子ちゃん 1511 7.39 20.9 30.2 -1.4631 0.2399
妹さえいればいい。 78456 7.38 4.9 18.7 -0.5635 0.9114
アイカツスターズ! 7650 7.35 8.0 16.5 -1.2532 0.3975
ぐでたま 3993 7.35 7.2 15.7 -0.8674 0.6422
一人之下 THE OUTCAST 2ndシーズン 4615 7.34 0.8 1.8 0.0082 1.0494
アイドルマスター SideM 8665 7.34 4.8 11.0 -1.2321 0.3637
イナズマイレブン アウターコード 2033 7.29 4.7 14.9 -1.1598 0.3638
「映画 中二病でも恋がしたい! -Take On Me-」ミニドラマ『公開直前の・・・回顧劇場』 3057 7.27 0.7 1.2 3.5748 2.1877
狐妖小红娘 南国 804 7.25 2.2 8.3 -1.3116 0.5578
BORUTO -NARUTO NEXT GENERATIONS- 168563 7.24 6.0 22.5 -0.7346 0.7048
Fate/Apocrypha 134191 7.23 5.3 15.3 -0.8069 0.7122
Fate/Grand Order 2852 7.2 2.0 7.5 -0.6992 0.5278
牙狼<GARO>-VANISHING LINE- 28052 7.18 6.2 14.7 -0.4405 0.9311
忍たま乱太郎 2898 7.16 25.3 35.8 -0.2590 0.8141
UQ HOLDER! ~魔法先生ネギま!2~ 50090 7.15 3.2 17.3 -0.4082 0.8737
東方二次創作同人アニメ 夢想夏郷 21933 7.12 4.0 25.7 -0.2660 0.9103
トリック・オア・アリス 5701 7.11 1.0 1.3 2.2918 1.7505
클로저스 : SIDE BLACKLAMBS 8753 7.09 2.9 6.0 -1.1927 0.3663
ポケットモンスター サン&ムーン 23938 7.05 10.4 24.8 -0.3579 0.9117
ガンダムビルドファイターズ バトローグ 2697 7.04 2.5 23.7 -0.0455 1.0723
キラキラ☆プリキュアアラモード 3953 7.03 6.7 16.8 0.1571 0.9630
まじかるすいーとプリズム・ナナ 7486 6.97 0.8 1.2 -0.0810 1.0679
妖怪アパートの幽雅な日常 31941 6.92 12.6 25.9 -0.5659 0.7538
CARDFIGHT!! ヴァンガードG Z 1517 6.91 5.0 13.6 0.6623 1.1461
遊戯王VRAINS 13846 6.89 8.6 21.4 -0.0242 0.9662
十二大戦 114672 6.81 3.9 26.4 -0.0559 1.0642
妖怪ウォッチ 10436 6.81 16.8 30.2 -0.7071 0.5928
ザ・キング・オブ・ファイターズ デスティニー 1071 6.78 3.5 15.1 0.5271 1.0649
お酒は夫婦になってから 45692 6.75 5.7 18.9 -0.6215 0.8077
全职法师 第2季 10314 6.75 3.1 25.2 -0.4407 0.8246
シンデレラガールズ劇場 第2期 3718 6.74 2.3 12.4 -0.6929 0.7669
アイドルタイムプリパラ 2051 6.73 7.6 14.3 -1.2290 0.1988
きららファンタジア 2547 6.73 1.4 3.0 0.9601 1.3310
グランブルーファンタジー 3133 6.66 5.4 10.4 -0.2846 0.7991
シンデレラガールズ劇場 火曜シンデレラシアター 1428 6.63 2.1 13.9 -0.9078 0.7091
ブラッククローバー 156662 6.56 9.1 21.8 -0.6047 0.6046
Code:Realize ~創世の姫君~ 37981 6.56 10.2 20.1 -1.0994 0.5574

data-search 以外もカラムの表示非表示切り替えなどが使えるが、ワタシのこの WordPress ブログのスタイルと相性悪く、表示がガタガタになるので紹介はやめとく(同じ理由で、ページング(data-pagination) も簡単に出来る(data-pagination)がこれも同じく)。

なお、この検索ボックス、例えば「宝石の国」なら「houseki」と打ち込んでもヒットする。すげーと思ったが、多分これは違くて、url リンク(https://myanimelist.net/anime/35557/Houseki_no_Kuni_TV/stats)に反応してるんじゃないかと思う。もし「翻訳」機能内蔵してるならスゲーよね、けど違うと思う。

追記: Toolbar (data-show-toggle, data-show-columns)

今回のはhtml: iframe に動的に html をぶち込むを踏まえて iframe に閉じ込めたので、「フレームのソースを表示」で何してるかみてちょ。


ツールバーのスタイルがおかしいのがどうにもならなくて苦労していたが、これは公式ドキュメントがあまりに不案内だ。正しい Getting Started は結果的には CDN を使う場合は:

CDN は cdnjs、maxcdn のどちらかに統一、は多分出来ると思う
1 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
2 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
3 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
4 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
5 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

要するに bootstrap-table はより基礎的な bootstrap の上に成り立っている、という説明が最初になく、そのインポートの説明もない。結局いつもお世話になる w3cschools の Bootstrap 説明 を読んで理解出来た。

追記: ページング (data-pagination)

一つ上の追記と同じく、「フレームのソースを表示」で何してるかみてちょ。



iframe と相性よくないのかなぁ、ページ送りボタンが iframe サイズを必ず追い越してしまう。必ずスクロールバー動かさないといけないんじゃページングの意味ない…。