シンプルで扱いやすいHTMLテーブルライブラリ・「Grid.js」
Grid.jsはシンプルで扱いやすいHTMLテーブルライブラリです。ReactやAngular、Vueなどは勿論、バニラでも問題なく動作します 9kbと非常に軽量で使い方もすごく簡単です。データを元に自動で指定した要素にtableを作成します。 ソート機能や検索、ページネーション機能なども付いてます。試しに使ってみました example データが少ないのでページングは飾りになってしまっています。あと、現段階で、ソートは数値をうまくソートできないみたいです。 Grid.jsの使い方はとても簡単です。 <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" /> <script src="https://unpkg.com/gridjs"></script>CSSとJSを読み込みます。C
ソートや検索、ページネーション等、基本的な機能を備えた非依存のデータテーブルライブラリ・「Vanilla-DataTables」
Vanilla-DataTablesはバニラなデータテーブルJavaScriptライブラリです。他ライブラリに依存せず単体で動作します 機能もデータテーブル系でよくある基本的な機能を備えています。データのソート、任意のキーワードで検索、データが増えた時でも省スペースで収まるページネーション、インポート/エクスポート機能などなど また拡張性もあり、プラグインに対応していますので足りない機能を自分で作って加える事も出来るようになっています。ライセンスはMIT Vanilla-DataTables
TableDragger - 行/カラムに対応したテーブルドラッグ&ドロップツール MOONGIFT
テーブル表示は業務システムでもよく使われますが、使っている内に様々な要望が上がってきます。編集できるようにしたい、並び替えが欲しい、一括更新、絞り込み…などなど色々です。それらをすべて叶えるのは困難でしょう。 しかしライブラリを使えば実現できることもたくさんあります。今回はテーブルのドラッグ&ドロップをサポートするTableDraggerを紹介します。 TableDraggerの使い方 デモです。カラムのドラッグ&ドロップです。 さらに縦方向。ヘッダーも対象にしていますが、外すこともできます。 さらに縦と横を一緒にサポートもできます。 TableDraggerを使えばカラムをユーザの希望に応じて差し替えるといったことがユーザの手で実現できます。クライアントサイドだけで実現できるのも大きな利点でしょう。行の変更もワークフローによっては使うことがあるはずです。 TableDraggerはJav
List.js
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
jQuery-KingTable - 業務システムに使えそうなテーブルライブラリ MOONGIFT
Webベースで業務システムを構築した場合、必ず必要になるのが一覧表です。そして、そこにExcel並の機能が求められます。ソートであったり、フィルタリング、ページネーションが欲しいと要望が出るはずです。 それらを一から自作するのは大変です。そこで今回はjQuery-KingTableを紹介します。 jQuery-KingTableの使い方 jQuery-KingTableのデモです。ページネーション、検索、並び替えができます。 並び替えると小さなアイコンが出ます（今回はGreenの横にアイコンがあります）。 カラーテーマを変更しました。 検索するとヒットした部分がハイライトします。 表示するカラムを絞り込めます。 表示をテーブルではなくカードに変更しました。 さらにパネルにも。 フィルタリング条件の追加もできます。 jQuery-KingTableは多機能なので、業務要件によってはこれで十分
jQquery sortable lists
JQuery sortable lists also supports export methods. Look at the console log to see the result of buttons below. To array To hierarchy To string html pattern Note that li items can contains only one or max two direct children. Content div as a wrapper of li content and another list if item contains nested list. Like this: <ul> <li> <div>Whatever you want here</div> <ul> <li><div>Nested list item</d
データの編集やソート、ページングにも対応した軽量なデータグリッドを実装するスクリプト・「jsGrid」
jsGridはデータグリッドを実装する為の軽量スクリプトです。jQueryに依存しています。データテーブルのセル内のデータ編集やソート、ページングにも対応しています。スタイルコンポーネントのカスタマイズもし易いように設計したとの事。シンプルで良さ気です。ライセンスはMIT。 jsGrid動作サンプル
WATable - A swiss army jQuery table plugin
Filter on strings, numbers, booleans(checkboxes) and dates by typing into the fields (or optionally datepicker for dates). If you hoover a filter field with your mouse, you'll see a tooltip with hints on how they work. Prefix your filter with ! to get everything except your filter. Ex all but 10 to 20: !10..20 Prefix your filter with ? for regex filtering. Ex John and Jane Doe: ?John Doe|Jane Doe
Overview | jPList - jQuery Data Grid Controls
jQuery jPList plugin is deprecated. Please check pure JavaScript (ES6) jPList Library alternative instead.
jquery.dragtable.js
I read about dragtable on ajaxian.com. It is a library-independent js-function that gives you the ability to re-order table columns by using drag'n'drop. This function does not exactly fulfill my needs. So I thought to myself 'Why not doing it the jQuery way?' And my next thought was like in Trash of the Titans 'Can't someone else do it?' I started google-ing and found nothing. So why not being th
Dable
See it Alone <!DOCTYPE html> <html> <head> <script src="Dable.js"></script> </head> <body> <div id="TableDable"> <table> <thead> <tr> <th>Odd</th> <th>Even</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </tbody> </table> </div> <script type="text/javascript"> var dable = new Dable("TableDable"); </script> </body> </html> Dable with Bootstrap styling:
[JS]グリッドで配置したパネルをダイナミックなアニメーションでコントロールするスクリプト -gridSelector
Googleトレンドのようなグリッド状に配置した複数のパネルにダイナミックなアニメーションを与えるスクリプトを紹介します。 Dynamic Grid with Transitions デモはChrome, Firefoxでご覧ください。 ※Safariで見たら、クラッシュしました。 Demo 1: No transitions Demo 2: Transitions without delays Demo 3: Transitions with delays 3種類のデモは、1:アニメーション無し、2:ディレイ無しのアニメーション、3:ディレイ有りのアニメーションとなっています。 Demo 3のディレイ有りが一番かっこいいです！ Demo 3のアニメーションgif 左上からパネルの表示数・レイアウトが変更すると、アニメーションで変更します。 実装 div要素で配置したパネルと外部ファイルと
Chrome使いにそっと教える、タブ一覧を縦に並べられる拡張機能｢Tabman Tabs Manager｣
Chrome使いにそっと教える、タブ一覧を縦に並べられる拡張機能｢Tabman Tabs Manager｣2013.06.16 22:0012,588 ｢Tabman Tabs Manager｣はChromeのタブ一覧を縦に並べられる拡張機能です。開いているタブを縦にずらーっと並べることができます。また、その一覧をサイドバーのように置くこともできるので便利ですよ。 以下に使ってみた様子を載せておきます。 まずTabman Tabs Managerへアクセスしましょう。Google Chromeに拡張機能をインストールします。 Tabmanのアイコンをクリックすると、このように現在開いているタブの一覧が表示されます。クリックすると、そのタブに移動できますよ。 また、独立させることもできるので、擬似的に縦タブを作ることができます。ぜひご活用ください。 ［Tabman Tabs Manager］
jQuery UIを使ってテーブルをドラッグ＆ドロップでソートできるようにする
jQuery UIを使ってテーブルをドラッグ＆ドロップでソートできるようにする方法を紹介します。 テーブルをソートするには、jQuery UI Soatableを利用します。 １．基本 まず、jQueryのsoatable()を使ったテーブルのサンプルを示します。 サンプル サンプルのコード（抜粋）は次のとおりです。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <script> $(function(){ $('tbody').sortable(); }); </script> <table> <thead> <tr> <
Movable Typeのテンプレート一覧でテンプレートの並び替えができる「DraggableListTemplateプラグイン」
Movable Typeのテンプレート一覧で自由に並び替えができる「DraggableListTemplateプラグイン」を公開します。 １．機能 Movable Typeのテンプレート一覧画面・ウィジェット一覧画面のテンプレートやウィジェットについて、ドラッグ＆ドロップで自由に並び替えることができます。 並び替える前の状態 ドラッグ＆ドロップ 並び替えた後の状態 並び替え以外の主な機能等は下記のとおりです。 並び替えた状態はブログID別にcookieに保存するので、次回読み込み時も状態を保持します 並び替え後にテンプレートが追加された場合、リロード時にテンプレート一覧の一番下に表示します テンプレートの削除にも対応しています 異なる種別のテンプレート一覧にドロップすることはできません システムテンプレートは対象外です ２．価格 3300円/1インストールMT（税込み）。お試しはご自由にど
シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table Sort」:phpspot開発日誌
jQuery Table Sort | The Stupid Table Plugin by JoeQuery シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table Sort」 リッチなUIにするわけでもなく、ただヘッダーをクリックすると内容がソートされる機能を実現するためのプラグインです。 自分でテーブルをデザインしたい方には使い勝手が良いだけでなく超軽量なのもいいです クリックでソート↓ 使い方もライブラリを読み込んだら１行でOKです 関連エントリ アイテムを浮遊させられるjQueryプラグイン「jqFloat」 リアルなドラッグ＆ドロップが実現できるjQueryプラグイン「pep.jquery.js」 コンテンツの折りたたみを楽々実装できるjQueryプラグイン「jQuery Collapse」 ページ全体に広がるスライドショーを実装できるj
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2/5 TablesorterでHTMLの表をソート(並び替え)可能にする [ホームページ作成] All About![2/5 TablesorterでHTMLの表をソート(並び替え)可能にする [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/b7dd4cd1dde65db6c38d7f226e1c72497bc2f3bc/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F3%2F4%2F2%2F6%2F0%2Ftopimg_large.png)
Multifilter - Sort a table on Multiple inputs. A jQuery plugin from Tommy Palmer.
リッチなテーブルを実装する為のjQueryプラグイン・Open JS Grid
Daftar Slot Online Indonesia Terpercaya & Termurah - mixitup