tableの内容をJavaScriptで動的に並び替える方法をご紹介します。 dataTables.jsのダウンロード 今回は、表示数制御、検索機能を兼ね備えたdataTables.jsを使用します。 以下のURLからダウンロードをしてください。 http://www.datatables.net/download/ こちらはjQueryでのプラグインになりますので、 jQueryをお持ちでない方はダウンロードしてください。 htmlを記述 <thead>と<tbody>を省略せずに必ず記述してください。 JavaScriptをセット 以下にように記述してください。 今回は、「sample」というclass名がついたtableに適応させる例となっています。 以上になります。 サンプル 以下にアップしました。 http://www.actzero.jp/sample/20121210/ オプ
List.js v2.3.1 Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything. Hi! I'm Jonny and the author of List.js. I hope you like the lib. I’ve put a lot of hours into it! Feel free to follow me on Twitter and GitHub for news and donate a coffee for good karma ;) Follow @javve Donate a c
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト <script src="jquery.min.js" type="text/javascript"></script> <script src="list.min.js" type="text/javascript"></script> 実装 <div id="div1065"> <input class="search" /> <!-- featureクラスでソート --> <span class="sort" data-sort="feature">Sort features</span> <ul class="list"> <li> <h4 class="feature">Search</h4> <small
Tweet備忘録的にメモ。 商品を並べたときにボタンひとつで特定のジャンルだけ選んで表示したり、お手軽にソートできないかなと思うときがある。今回はそんなときのためのシンプルなjQueryを書いた。 コンテンツ一覧から特定のカテゴリだけ選ぶ、なんてときにも役に立つかも。 今回は、idがKeyYellowのボタンをクリックしたら、yellowというclassが振ってある要素だけが表示されるというものにした。 デモサイトも作ったので参考にしてください。 Class Sorting Demo htmlは下記の通り。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Class Sorting Demo</title> <link rel="stylesheet" href="style.css"> <scri
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
