[JS]テーブルにアニメーションを伴ったページネーション機能を加えるスクリプト -Table Paginator

既存のテーブルにも簡単に組み込める、テーブルに美しいフェードのアニメーションを伴ったページネーション機能を加えるjQueryのプラグインを紹介します。

Table Paginator
デモ

[ad#ad-2]

デモはシンプルに実装されたテーブルの上にある「Click to Pagenate」をクリックすると、長いテーブルがページネーション付きのテーブルに変更されます。

テーブルの下部に配置されたナビゲーションをクリックすると、フェードのアニメーションで指定されたテーブルが表示されます。

美しいグラデショーンを伴ったフェードのアニメーション
※デモで実際のアニメーションをお楽しみください。

Table Paginatorの主な特徴

• 既存のテーブルにも簡単に実装できます。
• 美しいインターフェイスを提供します。
• インターフェイスはjQuery UIのテーマを継承します。
• アニメーションのスピードは調整可能です。
• 1ページに表示する列の数は選択可能です。

Table Paginatorの実装

HTML

シンプルなtable要素で、jQueryのセレクタで指定できるようidを与えています。

<table id="iWantToPaginateThis">
   <tr>
     <th>Header</th>
     <th>Header</th>
     <th>Header</th>
   <tr>
  
   <tr>
     <td>data</td>
     <td>data</td>
     <td>data</td>
   </tr>

   <tr>
     <td>data</td>
     <td>data</td>
     <td>data</td>
   </tr>

   <tr>
     <td>data</td>
     <td>data</td>
     <td>data</td>
   </tr>
</table>

JavaScript

「jquery.js」と当スクリプトを外部ファイルとし、下記のスクリプトを記述します。

$("#iWantToPaginateThis").paginate(30, 500);

[ad#ad-2]

サイトでは他にも面白いアニメーションを伴ったjQueryのプラグインが開発されいます。

Cool Text
カラーやサイズがアニメーションで変更されます。