2013年6月27日木曜日

jQueryでHTMLのテーブルにページング機能を付与する

(function($) {
    $.fn.tablepager = function(options){

        var defaults = {
            table: null,
            pager: null,
            limit: 10,
            displayingText: '%TOTAL_ROW%件中、%FIRST_ROW% - %LAST_ROW%を表示',
            firstText: '最初',
            lastText: '最後',
            prevText: '前へ',
            nextText: '次へ',
            version: 0.1
        };
        defaults.table = this.selector;
        options.pager = options.pager;
        var config = $.extend({}, defaults, options);

        moveTo(1);

        if (this.tablesorter) {
            this.trigger('update');
        }

        // TABLE TBODY内のTRの数を返します
        function countRow() {
            return $(config.table).find("tbody tr").size();
        }
        // 最大ページ数を返します
        function countPage() {
            return Math.ceil(countRow() / config.limit);
        }
        // nページへ移動します
        function moveTo(n) {
            n = n ? n : 1;
            offset = config.limit * (n - 1);
            maxrow = offset + config.limit - 1;
            $.each($(config.table).find("tbody tr"), function(index){
                if (index < offset || index > maxrow) {
                    $(this).css('display', 'none');
                } else {
                    $(this).css('display', '');
                }
            });
            pagenate(n);
        }
        // ページネーションを出力します
        function pagenate(currentPage) {
            $(config.pager).empty();
            if (countRow() == 0) return false;
            var firstRow = (currentPage - 1) * config.limit + 1;
            var lastRow = firstRow - 1;
            $.each($(config.table).find("tbody tr"), function(){
                if($(this).css('display') != 'none') {
                    lastRow++;
                }
            });
            var markup = config.displayingText.replace('%TOTAL_ROW%', countRow())
                                              .replace('%FIRST_ROW%', firstRow)
                                              .replace('%LAST_ROW%', lastRow);
            for(var i=1; i <= countPage(); i++) {
                if (currentPage != i) {
                    markup += '' + i + ' ';
                } else {
                    markup += '' + i + ' ';
                }
            }
            $(config.pager).append(markup);
            $.each($(config.pager).find("a"), function(index){
                if($(this).text().match(/^\d$/)) {
                    $(this).bind('click', function(){
                        moveTo($(this).text());
                    });
                }
            });
        }
    };
})(jQuery);

0 件のコメント:

コメントを投稿