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);
        }
        // ｎページへ移動します
        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);

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;
            }
            // １ページあたりの表示件数を返す
            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);

CSS:長いURLなどをブロック要素内で強制的に折り返すには

CSS:長いURLなどをブロック要素内で強制的に折り返すには

word-wrap:break-word;
word-break:break-all;