PaginateMyTable - テーブルタグをページネーション可能に MOONGIFT
業務システムではデータの一覧表示を作ることが多いでしょう。そんな時にはHTMLのテーブルタグを使うはずです。50行くらいであれば良いですが、数百行のデータを一気に表示すると視認性も落ちますし、使いづらくなります。 そこで使ってみたいのがPaginateMyTableです。HTMLのテーブルにページネーションを追加してくれるライブラリです。 PaginateMyTableの使い方 元々の表示です。 実行しました。デフォルトで5行ごとのページネーションになります。 PaginateMyTableは単なるテーブルをページネーション可能にしてくれます。動的に行われているので、ページネーションの件数を変更したりするのも簡単でしょう。サーバサイドを使わないので何度も読み込み直したりする必要もなく、便利そうです。 PaginateMyTableはjQuery/JavaScript製のオープンソース・ソフ
項目数が多くなったリストやテーブルを自動で複数ページに分割し、ページネーションを加えるスクリプト・「paginathing.js」
paginathing.jsは長くなったリストやテーブルを複数ページに分割するスクリプトです。jQueryに依存します。ページネーションも自動で付与します。オプションで1ページに表示するアイテム数やリンクテキストの変更が可能です。冗長化した情報が整理して見やすくしたいですね。導入も楽そうです。ライセンスはMIT。 paginathing.js
リストを任意のカラム数に分ける
Result 普通のリストを任意のカラム数で分けます。現在は3カラムに分けられています。 var num_cols = 3,の数値を変更すれば設定したカラム数に分けられます。 マークアップには変更を加えず処理出来るので覚えておけば何かと重宝すると思います。 jQuery$(function($) { var num_cols = 3, //対象のリスト container = $('.split-list'), listItem = 'li', listClass = 'sub-list'; container.each(function() { var items_per_col = new Array(), //リストのチェックと分割 items = $(this).find(listItem), min_items_per_col = Math.floor(items.length
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
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
How to Create a Tiled Background Slideshow | Codrops
A tutorial that shows how to recreate the four tiles slideshow effect seen on the website of Serge Thoroval. Using 3D transforms, transitions and animations, the aim is to implement a smooth effect and add some variations. Today we’d like to show you how to recreate the background image slideshow seen on the stunning website of Serge Thoroval’s Atelier that was coded and designed by talented Jean-
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
指定した桁数ごとに自動で区切るスクリプト -Politespace | コリス
デモページ デモでは、さまざまな区切りができます。 3桁ずつ区切るなどの同数の区切り 料金など 4桁ずつ区切るなどの同数の区切り クレジットカードなど 3桁、4桁など異なる数の区切り 郵便番号など 指定数の区切りの後、残りはフリー 米の電話番号など 日本の電話番号のように最初の桁が2桁か4桁、というのは扱えないのがちょっと残念。 Politespaceの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="js/jquery.js"></script> <script src="js/politespace.js"></script> </head> Step 2: JavaScript jQueryのセレクタで適用を指定し、スクリプトを実行します。 <script> jQuery( func
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:
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
[JS]レイヤーに要素を配置し、分離して3Dにぐるぐる回転させるスクリプト -CSSMatrix
jQueryのプラグイン「CSSMatrix」を使って、不連続のレイヤーに要素を配置し、それぞれを分離して3Dにぐるぐる回転して表示するデモを紹介します。
[JS]アコーディオンとカルーセルが合体したスライダーのスクリプト -Accarousel
伸び縮みするアコーディオンと回転木馬のようにスライドするカルーセルを合体させたスライダーを実装するjQueryのプラグインを紹介します。 jQuery Accordion with Carousel – Accarousel [ad#ad-2] Accarouselのデモ Accarouselの使い方 Accarouselのデモ デモはFirefox, Chrome, Safari, Opera, IE7+でご覧ください。 デモページ：4枚目をアコーディオン カルーセルは右下のナビゲーションでサムネイル画像をスライドさせます。 起点と終点があるのがちょっと残念。 [ad#ad-2] Accarouselの使い方 実装は簡単で、3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 ※スタイルシートはLESS版も用
jQueryでシンプルなページャープラグイン作りました
Posted: 2012.03.30 / Category: javascript / Tag: jQuery 以前、PHPでページャーを作成しましたが、それのjQuery版を作成しました。 あまり用途ないかもしれませんが、Ajaxでいろいろしたい場合Javascriptで表示できた方が便利かなとか。 プラグイン的な使い方 divに適当にidを割り当てます。 出力されるタグは最近流行の Twitter Bootstrap を基本としてますので「class="pagination"」としておくといい感じになります。 自分でカスタマイズする場合は59～77行目あたりを修正してください。 html <div id="pager" class="pagination"></div> jQueryの実行部分では最低限「totalRec（トータルレコード数）」オプションを指定します。 html <sc
連続した要素を分割してページネーションを実装、移動時にエフェクトを加えるjQueryプラグイン・jPages - かちびと.net
ちょっと珍しいタイプでしたので備忘録。 連続した要素を、指定した数に達したら 分割して、ページネーションを自動で 生成し、移動時にエフェクトが加わえる、 というもの。大量のリストをコンパクト に、という方に向いてそうですね。 連続した要素になら基本的になんでも使えるっぽいので何かしら応用できるかもしれません。コンパクトにまとめられるのは素敵ですね。 例えばli要素が100個くらいあったとして、これを10個ごと、10ページに分割し、ページ移動時にエフェクトも実装する、というもの。少々カスタマイズ性には欠けますがこれはこれで手軽に大量の要素をコンパクト化出来るので覚えておいて損はないかなと思います。 以下動作サンプルです。 Sample ページネーションの数字が小さすｇ コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1
１枚の画像をタイル状に並べてそれぞれアニメーションさせて切り替えるクールなjQueryサンプル:phpspot開発日誌
jQuery Stylish Background Image Sliding effect | image slideshow １枚の画像をタイル状に並べてそれぞれアニメーションさせて切り替えるクールなjQueryサンプル 説明が難しいのでデモを御覧ください。写真もいいのですが、タイル毎に切り替わるエフェクトはなかなかクールですね。 ファッションやアパレル関連のサイトで使うことができそうです 関連エントリ 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」 CSS3で実装された画像スライドショーサンプル HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」 3D効果を使って迫力あるスライドショーを作れる「Slicebox」
jQueryでページ送りのインタフェースが簡単に作れる「jqPagination」:phpspot開発日誌
jqPagination, a jQuery pagination plugin (obviously) jQueryでページ送りのインタフェースが簡単に作れる「jqPagination」。 次のようなインタフェースのページ送りのインタフェースを簡単に実現できます。 クリック時にコールバックを指定して何ページ目がリクエストされたかを知ることが出来るので、指定ページにJSで飛ばすだけという流れです 実装は次のように決められたマークアップをコードして、コールバックを指定しつつ初期化するだけです。 デザイン等はCSSで調整できそうです。 標準のデザイン的にはスマホなどで使えそうなものになってますね 関連エントリ 面倒なページ分けを簡単実装できる10のスクリプト集
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tile