/** * jQuery tablePager plugin * TABLEタグ内のTBODY下にあるTRタグを指定された件数ごとにページングし、 * 指定されたセレクタにページネーションを出力するjQueryプラグインです。 * * 【html】 * <div id='pager'></div> * <table id='item_list'> * <thead>…</thead> * <tbody> * <tr> * <td>xxxxxxx</td> * * 【javascript】 * $('#item_list').tablePager(); * * 【option】 * appender : ページネーションを出力する要素のID * displayingText: (既定)%TOTAL_ROW%件中、%FIRST_ROW% - %LAST_ROW%を表示' * %で囲まれた部分が変数によって置換されます。 * firstText : (既定)最初→最初のページへのリンクに使用する文字列です。 * lastText : (既定)最後→最後のページへのリンクに使用する文字列です。 * prevText : (既定)前へ→前のページへのリンクに使用する文字列です。 * nextText : (既定)次へ→次のページへのリンクに使用する文字列です。 * */ (function($){ $.extend({ tablePager: new function() { // 設定情報 var config; // デフォルト値 var defaults = { limit: 10, page: 1, appender: 'pager', tableId: '', displayingText: '%TOTAL_ROW%件中、%FIRST_ROW% - %LAST_ROW%を表示', firstText: '最初', lastText: '最後', prevText: '前へ', nextText: '次へ', }; // 総レコード数を返す function getRecordCount() { return $(config.tableId).find("tbody tr").length; } // 1ページあたりの表示件数を返す function getLimit() { return config.limit; } // 最大ページ番号を返す function getMaxPages() { return Math.ceil(getRecordCount() / config.limit); } // 現在表示しているページを返す function getPage() { return config.page; } // 現在表示しているページの最初の行番号を返す function getFirstRow() { return config.limit * (config.page - 1) + 1; } // 現在表示しているページの最後の行番号を返す function getLastRow() { return getFirstRow() + $(config.tableId).find('tbody tr:visible').length - 1; } /** * public methods */ // id が appender のエレメントにページネーションを出力する $.fn.pagenate = function pagenate() { var prefix = '_pagenate'; $('#'+config.appender).html('') var link = config.displayingText.replace('%TOTAL_ROW%', getRecordCount()) .replace('%FIRST_ROW%', getFirstRow()) .replace('%LAST_ROW%', getLastRow()); if (config.page > 1) { link += '|<a href="javascript:void(0);" onclick="$(\'' + config.tableId + '\').page(1)">' + config.firstText + '</a> '; link += '|<a href="javascript:void(0);" onclick="$(\'' + config.tableId + '\').page(' + (config.page - 1) + ')">' + config.prevText + '</a> '; } for(var i=1; i<=getMaxPages(); i++) { id = prefix + i; if (i != config.page) { link += '<a href="javascript:void(0);" onclick="$(\'' + config.tableId + '\').page(' + i + ')">' + i + '</a> '; } else { link += '<b>' + i + '</b> '; } } if (config.page < getMaxPages()) { link += '|<a href="javascript:void(0);" onclick="$(\'' + config.tableId + '\').page(' + (config.page + 1) + ')">' + config.nextText + '</a> '; link += '|<a href="javascript:void(0);" onclick="$(\'' + config.tableId + '\').page(' + getMaxPages() + ')">' + config.lastText + '</a> '; } $('#'+config.appender).append(link); } // nページへ移動する $.fn.page = function page(n) { config.page = n; var offset = config.limit * (config.page - 1); var nRow = 1; $.each($(config.tableId).find("tbody tr"), function(){ if (nRow > offset && nRow <= offset + config.limit) { $(this).show(); } else { $(this).hide(); } nRow++; }); // ページネーションを再描画 this.pagenate(); return false; } // コンストラクタ this.construct = function(options) { config = $.extend(defaults, options); config.tableId = this.selector; this.page(1); this.pagenate(); }; return this; } }); // extend plugin scope $.fn.extend({ tablePager: $.tablePager.construct }); })(jQuery);
2013年6月14日金曜日
TABLEにページング機能を追加するjQUery tablePagerプラグイン
TABLEにページング機能を追加するjQUery tablePagerプラグインを作ってみました。
登録:
コメントの投稿 (Atom)
0 件のコメント:
コメントを投稿