2013年6月14日金曜日

TABLEにページング機能を追加するjQUery tablePagerプラグイン

TABLEにページング機能を追加するjQUery tablePagerプラグインを作ってみました。
/**
 * 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);

0 件のコメント:

コメントを投稿