シンプルで扱いやすい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
AnyGrids - 高機能なテーブル表示ライブラリ
業務システムで最もよく使うのが一覧でのデータ表示ではないでしょうか。多くはテーブルタグを使って構築しますが、ソートや表示するデータの多様さによって、より多機能を求められます。 今回紹介するAnyGridsはビジネスデータの表示に特化したライブラリとなっています。業務システムでのデータ表示に一役買ってくれそうです。 AnyGridsの使い方 デモです。アイコンやグラフを表示しています。 一つの行を複数段で表示できます。 ページネーション、ソートが備わっています。 グラフはマウスオーバーに対応しています。 AnyGridsの主な機能はページネーション、ソート、子供の行サポート、集計行、グラフ連携となっています。データ自体はJSONの配列で設定します。細かな表示部分を作り込まない分、実装が手軽になりそうです。 AnyGridsはJavaScript製のソフトウェア（ライセンスは独自）です。 An
PaginateMyTable - テーブルタグをページネーション可能に MOONGIFT
業務システムではデータの一覧表示を作ることが多いでしょう。そんな時にはHTMLのテーブルタグを使うはずです。50行くらいであれば良いですが、数百行のデータを一気に表示すると視認性も落ちますし、使いづらくなります。 そこで使ってみたいのがPaginateMyTableです。HTMLのテーブルにページネーションを追加してくれるライブラリです。 PaginateMyTableの使い方 元々の表示です。 実行しました。デフォルトで5行ごとのページネーションになります。 PaginateMyTableは単なるテーブルをページネーション可能にしてくれます。動的に行われているので、ページネーションの件数を変更したりするのも簡単でしょう。サーバサイドを使わないので何度も読み込み直したりする必要もなく、便利そうです。 PaginateMyTableはjQuery/JavaScript製のオープンソース・ソフ
項目数が多くなったリストやテーブルを自動で複数ページに分割し、ページネーションを加えるスクリプト・「paginathing.js」
paginathing.jsは長くなったリストやテーブルを複数ページに分割するスクリプトです。jQueryに依存します。ページネーションも自動で付与します。オプションで1ページに表示するアイテム数やリンクテキストの変更が可能です。冗長化した情報が整理して見やすくしたいですね。導入も楽そうです。ライセンスはMIT。 paginathing.js
Tabulator - Interactive JavaScript Tables
The easy to use, fully featured, interactive table jQuery plugin Download 3.2 Interactive Tables Made Simple A lightweight, fully featured, interactive table jQuery plugin. Version 3.2 Out Now! Column Calculations, Multi-level Grouping, Touch Events, Nested Data Field Definitions, Header Filter Functions, Scroll Keybindings and much more! Checkout the news article to find out more! Tabulator allow
TableFilter - HTMLテーブルのフィルタリング
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムで必ず求められるのがテーブルベースの一覧表示です。件数が少ない時にはただ表示するだけで十分ですが、数百件を越えるようになると様々な要望があがってきます。その一つがフィルタリングではないでしょうか。 HTMLのテーブルに対してフィルタ機能を追加してくれるのがTableFilterです。検索とはまた違う手軽なフィルタリングを実現してみましょう。 TableFilterの使い方 一例です。カラムの上にフィルタリングするテキストボックスが並んでいます。文字を入力してエンターを押せばデータがフィルタリングされます。 リアルタイムではないようですが、そこは改造できるでしょう。 入力はテキストだけでなく、ドロップダウンなども使えます。 より複雑に、ページネーションなども駆使したデモで
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は多機能なので、業務要件によってはこれで十分
データの編集やソート、ページングにも対応した軽量なデータグリッドを実装するスクリプト・「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
jQueryでページ分割ができる「SimplePaginationプラグイン」
jQueryでページ分割ができる「SimplePaginationプラグイン」の紹介です。 １．はじめに ページ分割の手法は色々ありますが、このエントリーで紹介するプラグインを利用することで簡単にページ分割を行うことができます。 が、配布サイトの説明だけで実現するのはかなり困難で、このエントリーでとりあえず動作するレベルのものを紹介したいと思います。 ２．プラグインのダウンロード SimplePaginationプラグインのページにアクセスし、Downloadにある「here」をクリックしてアーカイブをダウンロードします。 ダウンロードしたアーカイブを展開し、中にある、 jquery.simplePagination.js simplePagination.css を利用します。 ３．基本 ページ分割用のテキストを用意します。ここではサンプルとして8ページ分用意します。 <div clas
multiscroll.js - split multi-scrolling pages plugin
Powerful jQuery plugin Create split pages with two vertical scrolling panels. Compatible with mobile phones and devices and old browsers such as IE 11. <div id="multiscroll"> <div class="ms-left"> <div class="ms-section">Section 1 left</div> <div class="ms-section">Section 2 left</div> <div class="ms-section">Section 3 left</div> </div> <div class="ms-right"> <div class="ms-section">Section 1 righ
『速習デザインWordPress3.x』が発売されます。 - プライム・ストラテジー - CMSマネージドサービス
Webサイト運用の課題を弊社プロダクトで解決したお客様にインタビュー取材を行い、100の事例を108ページに及ぶ事例集としてまとめました。 100事例のWebサイト運用の課題と解決手法、解決後の直接、間接的効果がわかる 情報通信、 IT、金融、メディア、官公庁、学校などの業種ごとに事例を確認できる 特集では１社の事例を3ページに渡り背景からシステム構成まで詳解
スキャン時にまとまってしまったPDFを分割するには
ドキュメントスキャナなどで紙の書類をスキャンする際、別々のPDFに分けるはずが、連続してスキャンしたために、うっかり1つのPDFにまとまってしまったということはないだろうか。元の書類が残っていればスキャンし直せばよいが、あとになってから気づいた場合、PDFをページごとに分割してやる必要が出てくる。 ひとくちにPDFの分割といっても何通りもの方法があり、ページ番号が事前に分かっているかどうか、そのページが連続しているかどうかといった条件により、方法ごとに向き不向きがある。今回は、PDFを分割するための4つの方法を、それぞれの特徴とともに紹介する。目的に応じて使い分けることで、作業の効率化およびミスの防止に役立ててほしい。 なお、いずれもAdobe Acrobat XI Proでの操作を前提としている。Standardや他のバージョンの場合は適宜読み替えてほしい。 あらかじめ抽出したいページ番
Movable Typeでブログ記事やウェブページをページ分割する方法
Movable Typeでブログ記事やウェブページをページ分割する方法を紹介します。 １．はじめに Movable Typeでは静的に出力したアーカイブページやブログ記事、ウェブページをページ分割する機能が用意されていません（ダイナミックパブリッシングやDynamic MTMLであれば可能）。 メインページやアーカイブページのページ分割については「Pagebuteプラグイン」でページ分割することが可能です。 PageBute プラグインによるページ分割 が、このプラグインでもブログ記事やウェブページのページ分割についてはサポートされていません。 ということで、ブログ記事やウェブページをページ分割する方法を紹介します。 ２．プラグインのインストール 実は、ブログ記事やウェブページを分割する場合もPageButeプラグインの利用が可能です。 ただしちょっと細工が必要なため、プラグインがデフォル
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:
目的別、PDFの「加工」に役立つ無料オンラインサービス
Adobe AcrobatなどのPDF編集ソフトがない環境では、PDFの加工が行えるオンラインサービスを使うとよい。手持ちのPDFをアップロードすることで、Webブラウザ上でページの削除や並び替え、ファイルの分割、圧縮、回転やトリミング、さらにはテキストや注釈の記入、パスワードの追加まで、さまざまな操作が行える。 今回は、PDFをオンラインで加工できる無料サービスを目的別に分類してみた。共有PCでPDF編集ソフトが使えない場合など、必要に応じて活用してほしい。 なおビジネスで使用するPDFは、外部サービスへのアップロードが好ましくないことがほとんどだ。また多くのサービスでは、アップロードできる容量やページ数に制限がある。あくまでも一時利用や緊急時の利用と割り切り、通常はAdobe AcrobatなどのPDF編集ソフトを利用するほうがよいだろう。 PDFの任意のページを抽出する PDFの中か
windows
a handy, loosely-coupled jQuery plugin for full-screen scrolling windows project root | -- css | -- | -- main.css (compiled) | -- js | -- | -- jquery.windows.js | -- scss | -- | -- main.scss | -- index.html This is a light bootstrap that sets up: - the basic SASS for sequential full screen windows - a jQuery plugin for managing their positions as the user scrolls The plugin simply opens up a handy
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.webdesigncore.com/2014/01/27/25-free-pagination-psds-for-web-designers/
http://infinityforest.net/home/archives/2462
