日々学んだことを残しておこう。きっと未来の自分が探しにくる。 (ただ忘れっぽいだけです…)

スポンサーサイト


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
-------- : スポンサー広告 :
Pagetop

datatables レイアウト変更 dom


jquery datatablesでフィルター、ページ、表の位置を変更したい場合、オプションのDOMで変更可能。

$('#example').dataTable( {
"dom": "<'row'<'col-sm-6'l><'col-sm-6 right'i>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12'p>>"
} );

(参考サイト)
datatables DOMオプション リファレンス

datatables 表示位置のカスタマイズ
スポンサーサイト
2017-10-17 : JavaScript : コメント : 0 : トラックバック : 0
Pagetop

jquery datatables 横スクロール時に列固定


横にも縦にも長いテーブルをスマホでも操作しやすくみれる表って自作すると結構難しい。
ヘッダー固定して、さらに横スクロールする時に1番左の列は固定したまま、2列目以降はスクロールされたいなと。

jqueryのdatatablesでscrollXとscrollYを指定して、fixedcolumnsを使うと実現できたので、メモ。

(参考サイト)
https://datatables.net/extensions/fixedcolumns/

jsとcssをセットして、
テーブルのパラメータはこんな感じで思い通りにスマホでも、ヘッダー残ったまま、縦スクロールして、横には一番左列が残ったまま横スクロールできました。
jsとcssのバージョンがあっていないと、ヘッダーの下にもう一つヘッダーみたいなのが出てきたり、列や行が崩れたりしたけど、バージョンを合わせれば問題なくいきました。


$('#table0').DataTable( {
bInfo: false,
bFilter: false,
scrollY: '50vh',
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 1
}
} );



2017-05-12 : JavaScript : コメント : 0 : トラックバック : 0
Pagetop

jquery バージョン確認する方法


jqueryファイル名等にバージョン記載されていない場合とかにチェックしたい時、
以下をscriptに追加でアラートにバージョン表示されます。

jqueryのバージョン確認する方法


window.alert($.fn.jquery);
2017-05-01 : JavaScript : コメント : 0 : トラックバック : 0
Pagetop

javascript sha256 ハッシュ化


sha256のハッシュ値を確かめる時に、いつもは、ツールサイトで変換しているのだが、この前そのサイトがアクセスできなかった。

急ぎの時に困るなということで、自作することに。

(参考サイト)
jsSHA

jsだけで実装できるので、S3にjsとhtmlだけおいておけば、落ちることもないであろうと。

使い方も簡単ですねー。
sha256.jsをセットしておいて、

var shaObj = new jsSHA("SHA-256", "TEXT");
shaObj.update("abcd");
var hash = shaObj.getHash("HEX");

これでハッシュ値とれます。
jsSHAサイコーですね。

2017-01-02 : JavaScript : コメント : 0 : トラックバック : 0
Pagetop

jquery datatables ヘッダー固定


jquery datatables ヘッダー固定メモ

ページングとかしなくて、スクロールしてもヘッダー固定する方法

scrollY:"500px"  みたいに使えばOK。

(参考サイト)
https://datatables.net/reference/option/scrollY

動的に%で高さを指定したい場合は、(ex)50%なら
scrollY: "50vh"

でOK。
(参考サイト)
https://datatables.net/examples/basic_init/scroll_y_dynamic.html
2016-12-27 : JavaScript : コメント : 0 : トラックバック : 0
Pagetop
ホーム  次のページ »

広告

読みたいと思っている書籍

Amazon Web Services クラウドネイティブ・アプリケーション開発技法 一番大切な知識と技術が身につく Amazon Web Services 定番業務システム12パターン 設計ガイド イラストで学ぶ 機械学習 最小二乗法による識別モデル学習を中心に (KS情報科学専門書) イラストで学ぶ ディープラーニング (KS情報科学専門書)

カウンタ

メールフォーム

名前:
メール:
件名:
本文:

GoogleTranslate

管理人のつぶやき

人気記事ランキング

カテゴリ

openclose

ブログ内検索

全記事表示リンク

全ての記事を表示する

ブログパーツ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。