jTable v.2.2.0v2.2.0

Feature: Toolbar. [#188]
Feature: 'Change page size' combobox. [#1, #128]
Feature: 'Go to page' input. [#63]
Feature: Multiple sorting of columns by holding CTRL key. [#48]
Added options: multiSorting, gotoPageArea, pageSizes,
pageSizeChangeArea, pageList and toolbar.
Hungarian and Italian localizations [#179]
Fixed some issues. [#209]

1 files changed, 523 insertions, 292 deletions

diff --git a/dev/jquery.jtable.paging.js b/dev/jquery.jtable.paging.js
index a272c90..23af6a8 100644
--- a/dev/jquery.jtable.paging.js
+++ b/dev/jquery.jtable.paging.js
@@ -1,292 +1,523 @@
-/************************************************************************

-* PAGING extension for jTable                                           *

-*************************************************************************/

-(function($) {

-

-    //Reference to base object members

-    var base = {

-        load: $.hik.jtable.prototype.load,

-        _create: $.hik.jtable.prototype._create,

-        _createRecordLoadUrl: $.hik.jtable.prototype._createRecordLoadUrl,

-        _addRowToTable: $.hik.jtable.prototype._addRowToTable,

-        _addRow: $.hik.jtable.prototype._addRow,

-        _removeRowsFromTable: $.hik.jtable.prototype._removeRowsFromTable,

-        _onRecordsLoaded: $.hik.jtable.prototype._onRecordsLoaded

-    };

-

-    //extension members

-    $.extend(true, $.hik.jtable.prototype, {

-

-        /************************************************************************

-        * DEFAULT OPTIONS / EVENTS                                              *

-        *************************************************************************/

-        options: {

-            paging: false,

-            pageSize: 10,

-

-            messages: {

-                pagingInfo: 'Showing {0} to {1} of {2} records'

-            }

-        },

-

-        /************************************************************************

-        * PRIVATE FIELDS                                                        *

-        *************************************************************************/

-

-        _$pagingListArea: null, //Reference to the page list area in to bottom panel

-        _totalRecordCount: 0, //Total count of records on all pages

-        _currentPageNo: 1, //Current page number

-

-        /************************************************************************

-        * CONSTRUCTOR AND INITIALIZING METHODS                                  *

-        *************************************************************************/

-

-        /* Overrides base method to do paging-specific constructions.

-        *************************************************************************/

-        _create: function() {

-            base._create.apply(this, arguments);

-            this._createPageListArea();

-        },

-

-        /* Creates page list area if paging enabled.

-        *************************************************************************/

-        _createPageListArea: function() {

-            if (!this.options.paging) {

-                return;

-            }

-

-            this._$pagingListArea = $('<span></span>')

-                .addClass('jtable-page-list')

-                .prependTo(this._$bottomPanel.find('.jtable-left-area'));

-        },

-

-        /************************************************************************

-        * OVERRIDED METHODS                                                     *

-        *************************************************************************/

-

-        /* Overrides load method to set current page to 1.

-        *************************************************************************/

-        load: function() {

-            this._currentPageNo = 1;

-            base.load.apply(this, arguments);

-        },

-

-        /* Overrides _createRecordLoadUrl method to add paging info to URL.

-        *************************************************************************/

-        _createRecordLoadUrl: function() {

-            var loadUrl = base._createRecordLoadUrl.apply(this, arguments);

-            loadUrl = this._addPagingInfoToUrl(loadUrl, this._currentPageNo);

-            return loadUrl;

-        },

-

-        /* Overrides _addRowToTable method to re-load table when a new row is created.

-        * NOTE: THIS METHOD IS DEPRECATED AND WILL BE REMOVED FROM FEATURE RELEASES.

-        * USE _addRow METHOD.

-        *************************************************************************/

-        _addRowToTable: function($tableRow, index, isNewRow) {

-            if (isNewRow && this.options.paging) {

-                this._reloadTable();

-                return;

-            }

-

-            base._addRowToTable.apply(this, arguments);

-        },

-        

-        /* Overrides _addRow method to re-load table when a new row is created.

-        *************************************************************************/

-        _addRow: function ($row, options) {

-            if (options && options.isNewRow && this.options.paging) {

-                this._reloadTable();

-                return;

-            }

-

-            base._addRow.apply(this, arguments);

-        },

-

-        /* Overrides _removeRowsFromTable method to re-load table when a row is removed from table.

-        *************************************************************************/

-        _removeRowsFromTable: function($rows, reason) {

-            base._removeRowsFromTable.apply(this, arguments);

-

-            if (this.options.paging) {

-                if (this._$tableRows.length <= 0 && this._currentPageNo > 1) {

-                    --this._currentPageNo;

-                }

-

-                this._reloadTable();

-            }

-        },

-

-        /* Overrides _onRecordsLoaded method to to do paging specific tasks.

-        *************************************************************************/

-        _onRecordsLoaded: function(data) {

-            this._totalRecordCount = data.TotalRecordCount;

-            this._createPagingList();

-            base._onRecordsLoaded.apply(this, arguments);

-        },

-

-        /************************************************************************

-        * PRIVATE METHODS                                                       *

-        *************************************************************************/

-

-        /* Adds jtStartIndex and jtPageSize parameters to a URL as query string.

-        *************************************************************************/

-        _addPagingInfoToUrl: function(url, pageNumber) {

-            if (!this.options.paging) {

-                return url;

-            }

-

-            var jtStartIndex = (pageNumber - 1) * this.options.pageSize;

-            var jtPageSize = this.options.pageSize;

-

-            return (url + (url.indexOf('?') < 0 ? '?' : '&') + 'jtStartIndex=' + jtStartIndex + '&jtPageSize=' + jtPageSize);

-        },

-

-        /* Creates and shows the page list.

-        *************************************************************************/

-        _createPagingList: function() {

-            if (!this.options.paging || this.options.pageSize <= 0) {

-                return;

-            }

-

-            this._$pagingListArea.empty();

-            

-            var pageCount = this._calculatePageCount();

-

-            this._createFirstAndPreviousPageButtons();

-            this._createPageNumberButtons(this._calculatePageNumbers(pageCount));

-            this._createLastAndNextPageButtons(pageCount);

-            this._createPagingInfo();

-            this._bindClickEventsToPageNumberButtons();

-        },

-

-        /* Creates and shows previous and first page links.

-        *************************************************************************/

-        _createFirstAndPreviousPageButtons: function() {

-            if (this._currentPageNo > 1) {

-                $('<span></span>')

-                    .addClass('jtable-page-number-first')

-                    .html('|&lt')

-                    .data('pageNumber', 1)

-                    .appendTo(this._$pagingListArea);

-                $('<span></span>')

-                    .addClass('jtable-page-number-previous')

-                    .html('&lt')

-                    .data('pageNumber', this._currentPageNo - 1)

-                    .appendTo(this._$pagingListArea);

-            }

-        },

-

-        /* Creates and shows next and last page links.

-        *************************************************************************/

-        _createLastAndNextPageButtons: function(pageCount) {

-            if (this._currentPageNo < pageCount) {

-                $('<span></span>')

-                    .addClass('jtable-page-number-next')

-                    .html('&gt')

-                    .data('pageNumber', this._currentPageNo + 1)

-                    .appendTo(this._$pagingListArea);

-                $('<span></span>')

-                    .addClass('jtable-page-number-last')

-                    .html('&gt|')

-                    .data('pageNumber', pageCount)

-                    .appendTo(this._$pagingListArea);

-            }

-        },

-

-        /* Creates and shows page number links for given number array.

-        *************************************************************************/

-        _createPageNumberButtons: function(pageNumbers) {

-            var previousNumber = 0;

-            for (var i = 0; i < pageNumbers.length; i++) {

-                //Create "..." between page numbers if needed

-                if ((pageNumbers[i] - previousNumber) > 1) {

-                    $('<span></span>')

-                        .addClass('jtable-page-number-space')

-                        .html('...')

-                        .appendTo(this._$pagingListArea);

-                }

-

-                this._createPageNumberButton(pageNumbers[i]);

-                previousNumber = pageNumbers[i];

-            }

-        },

-

-        /* Creates a page number link and adds to paging area.

-        *************************************************************************/

-        _createPageNumberButton: function(pageNumber) {

-            $('<span class="' + (this._currentPageNo == pageNumber ? 'jtable-page-number-active' : 'jtable-page-number') + '">' + pageNumber + '</span>')

-                .data('pageNumber', pageNumber)

-                .appendTo(this._$pagingListArea);

-        },

-

-        /* Calculates total page count according to page size and total record count.

-        *************************************************************************/

-        _calculatePageCount: function() {

-            var pageCount = Math.floor(this._totalRecordCount / this.options.pageSize);

-            if (this._totalRecordCount % this.options.pageSize != 0) {

-                ++pageCount;

-            }

-

-            return pageCount;

-        },

-

-        /* Calculates page numbers and returns an array of these numbers.

-        *************************************************************************/

-        _calculatePageNumbers: function(pageCount) {

-            if (pageCount <= 6) {

-                //Show all pages

-                var pageNumbers = [];

-                for (var i = 1; i <= pageCount; ++i) {

-                    pageNumbers.push(i);

-                }

-

-                return pageNumbers;

-            } else {

-                //show first three, last three, current, previous and next page numbers

-                var shownPageNumbers = [1, 2, 3, pageCount - 2, pageCount - 1, pageCount];

-                var previousPageNo = this._normalizeNumber(this._currentPageNo - 1, 1, pageCount, 1);

-                var nextPageNo = this._normalizeNumber(this._currentPageNo + 1, 1, pageCount, 1);

-

-                this._insertToArrayIfDoesNotExists(shownPageNumbers, previousPageNo);

-                this._insertToArrayIfDoesNotExists(shownPageNumbers, this._currentPageNo);

-                this._insertToArrayIfDoesNotExists(shownPageNumbers, nextPageNo);

-

-                shownPageNumbers.sort(function(a, b) { return a - b; });

-                return shownPageNumbers;

-            }

-        },

-

-        /* Creates and shows paging informations.

-        *************************************************************************/

-        _createPagingInfo: function() {

-            var startNo = (this._currentPageNo - 1) * this.options.pageSize + 1;

-            var endNo = this._currentPageNo * this.options.pageSize;

-            endNo = this._normalizeNumber(endNo, startNo, this._totalRecordCount, 0);

-

-            if (endNo >= startNo) {

-                var pagingInfoMessage = this._formatString(this.options.messages.pagingInfo, startNo, endNo, this._totalRecordCount);

-                $('<span></span>')

-                    .addClass('jtable-page-info')

-                    .html(pagingInfoMessage)

-                    .appendTo(this._$pagingListArea);

-            }

-        },

-

-        /* Binds click events of all page links to change the page.

-        *************************************************************************/

-        _bindClickEventsToPageNumberButtons: function() {

-            var self = this;

-            self._$pagingListArea

-                .find('.jtable-page-number,.jtable-page-number-previous,.jtable-page-number-next,.jtable-page-number-first,.jtable-page-number-last')

-                .click(function(e) {

-                    e.preventDefault();

-                    var $this = $(this);

-                    self._currentPageNo = $this.data('pageNumber');

-                    self._reloadTable();

-                });

-        }

-

-    });

-

-})(jQuery);

+/************************************************************************
+* PAGING extension for jTable                                           *
+*************************************************************************/
+(function ($) {
+
+    //Reference to base object members
+    var base = {
+        load: $.hik.jtable.prototype.load,
+        _create: $.hik.jtable.prototype._create,
+        _setOption: $.hik.jtable.prototype._setOption,
+        _createRecordLoadUrl: $.hik.jtable.prototype._createRecordLoadUrl,
+        _addRowToTable: $.hik.jtable.prototype._addRowToTable,
+        _addRow: $.hik.jtable.prototype._addRow,
+        _removeRowsFromTable: $.hik.jtable.prototype._removeRowsFromTable,
+        _onRecordsLoaded: $.hik.jtable.prototype._onRecordsLoaded
+    };
+
+    //extension members
+    $.extend(true, $.hik.jtable.prototype, {
+
+        /************************************************************************
+        * DEFAULT OPTIONS / EVENTS                                              *
+        *************************************************************************/
+        options: {
+            paging: false,
+            pageList: 'normal', //possible values: 'minimal', 'normal'
+            pageSize: 10,
+            pageSizes: [10, 25, 50, 100, 250, 500],
+            pageSizeChangeArea: true,
+            gotoPageArea: 'combobox', //possible values: 'textbox', 'combobox', 'none'
+
+            messages: {
+                pagingInfo: 'Showing {0}-{1} of {2}',
+                pageSizeChangeLabel: 'Row count',
+                gotoPageLabel: 'Go to page'
+            }
+        },
+
+        /************************************************************************
+        * PRIVATE FIELDS                                                        *
+        *************************************************************************/
+
+        _$bottomPanel: null, //Reference to the panel at the bottom of the table (jQuery object)
+        _$pagingListArea: null, //Reference to the page list area in to bottom panel (jQuery object)
+        _$pageSizeChangeArea: null, //Reference to the page size change area in to bottom panel (jQuery object)
+        _$pageInfoSpan: null, //Reference to the paging info area in to bottom panel (jQuery object)
+        _$gotoPageArea: null, //Reference to 'Go to page' input area in to bottom panel (jQuery object)
+        _$gotoPageInput: null, //Reference to 'Go to page' input in to bottom panel (jQuery object)
+        _totalRecordCount: 0, //Total count of records on all pages
+        _currentPageNo: 1, //Current page number
+
+        /************************************************************************
+        * CONSTRUCTOR AND INITIALIZING METHODS                                  *
+        *************************************************************************/
+
+        /* Overrides base method to do paging-specific constructions.
+        *************************************************************************/
+        _create: function () {
+            base._create.apply(this, arguments);
+            if (this.options.paging) {
+                this._createBottomPanel();
+                this._createPageListArea();
+                this._createGotoPageInput();
+                this._createPageSizeSelection();
+            }
+        },
+
+        /* Creates bottom panel and adds to the page.
+        *************************************************************************/
+        _createBottomPanel: function () {
+            this._$bottomPanel = $('<div />')
+                .addClass('jtable-bottom-panel')
+                .insertAfter(this._$table);
+
+            $('<div />').addClass('jtable-left-area').appendTo(this._$bottomPanel);
+            $('<div />').addClass('jtable-right-area').appendTo(this._$bottomPanel);
+        },
+
+        /* Creates page list area.
+        *************************************************************************/
+        _createPageListArea: function () {
+            this._$pagingListArea = $('<span></span>')
+                .addClass('jtable-page-list')
+                .appendTo(this._$bottomPanel.find('.jtable-left-area'));
+
+            this._$pageInfoSpan = $('<span></span>')
+                .addClass('jtable-page-info')
+                .appendTo(this._$bottomPanel.find('.jtable-right-area'));
+        },
+
+        /* Creates page list change area.
+        *************************************************************************/
+        _createPageSizeSelection: function () {
+            var self = this;
+
+            if (!self.options.pageSizeChangeArea) {
+                return;
+            }
+
+            //Add current page size to page sizes list if not contains it
+            if (self._findIndexInArray(self.options.pageSize, self.options.pageSizes) < 0) {
+                self.options.pageSizes.push(parseInt(self.options.pageSize));
+                self.options.pageSizes.sort(function (a, b) { return a - b; });
+            }
+
+            //Add a span to contain page size change items
+            self._$pageSizeChangeArea = $('<span></span>')
+                .addClass('jtable-page-size-change')
+                .appendTo(self._$bottomPanel.find('.jtable-left-area'));
+
+            //Page size label
+            self._$pageSizeChangeArea.append('<span>' + self.options.messages.pageSizeChangeLabel + ': </span>');
+
+            //Page size change combobox
+            var $pageSizeChangeCombobox = $('<select></select>').appendTo(self._$pageSizeChangeArea);
+
+            //Add page sizes to the combobox
+            for (var i = 0; i < self.options.pageSizes.length; i++) {
+                $pageSizeChangeCombobox.append('<option value="' + self.options.pageSizes[i] + '">' + self.options.pageSizes[i] + '</option>');
+            }
+
+            //Select current page size
+            $pageSizeChangeCombobox.val(self.options.pageSize);
+
+            //Change page size on combobox change
+            $pageSizeChangeCombobox.change(function () {
+                self._changePageSize(parseInt($(this).val()));
+            });
+        },
+
+        /* Creates go to page area.
+        *************************************************************************/
+        _createGotoPageInput: function () {
+            var self = this;
+
+            if (!self.options.gotoPageArea || self.options.gotoPageArea == 'none') {
+                return;
+            }
+
+            //Add a span to contain goto page items
+            this._$gotoPageArea = $('<span></span>')
+                .addClass('jtable-goto-page')
+                .appendTo(self._$bottomPanel.find('.jtable-left-area'));
+
+            //Goto page label
+            this._$gotoPageArea.append('<span>' + self.options.messages.gotoPageLabel + ': </span>');
+
+            //Goto page input
+            if (self.options.gotoPageArea == 'combobox') {
+
+                self._$gotoPageInput = $('<select></select>')
+                    .appendTo(this._$gotoPageArea)
+                    .data('pageCount', 1)
+                    .change(function () {
+                        self._changePage(parseInt($(this).val()));
+                    });
+                self._$gotoPageInput.append('<option value="1">1</option>');
+
+            } else { //textbox
+
+                self._$gotoPageInput = $('<input type="text" maxlength="10" value="' + self._currentPageNo + '" />')
+                    .appendTo(this._$gotoPageArea)
+                    .keypress(function (event) {
+                        if (event.which == 13) { //enter
+                            event.preventDefault();
+                            self._changePage(parseInt(self._$gotoPageInput.val()));
+                        } else if (event.which == 43) { // +
+                            event.preventDefault();
+                            self._changePage(parseInt(self._$gotoPageInput.val()) + 1);
+                        } else if (event.which == 45) { // -
+                            event.preventDefault();
+                            self._changePage(parseInt(self._$gotoPageInput.val()) - 1);
+                        } else {
+                            //Allow only digits
+                            var isValid = (
+                                (47 < event.keyCode && event.keyCode < 58 && event.shiftKey == false && event.altKey == false)
+                                    || (event.keyCode == 8)
+                                    || (event.keyCode == 9)
+                            );
+
+                            if (!isValid) {
+                                event.preventDefault();
+                            }
+                        }
+                    });
+
+            }
+        },
+
+        /* Refreshes the 'go to page' input.
+        *************************************************************************/
+        _refreshGotoPageInput: function () {
+            if (!this.options.gotoPageArea || this.options.gotoPageArea == 'none') {
+                return;
+            }
+
+            if (this._totalRecordCount <= 0) {
+                this._$gotoPageArea.hide();
+            } else {
+                this._$gotoPageArea.show();
+            }
+
+            if (this.options.gotoPageArea == 'combobox') {
+                var oldPageCount = this._$gotoPageInput.data('pageCount');
+                var currentPageCount = this._calculatePageCount();
+                if (oldPageCount != currentPageCount) {
+                    this._$gotoPageInput.empty();
+                    for (var i = 1; i <= currentPageCount; i++) {
+                        this._$gotoPageInput.append('<option value="' + i + '">' + i + '</option>');
+                    }
+
+                    this._$gotoPageInput.data('pageCount', currentPageCount);
+                }
+            }
+
+            //same for 'textbox' and 'combobox'
+            this._$gotoPageInput.val(this._currentPageNo);
+        },
+
+        /************************************************************************
+        * OVERRIDED METHODS                                                     *
+        *************************************************************************/
+
+        /* Overrides load method to set current page to 1.
+        *************************************************************************/
+        load: function () {
+            this._currentPageNo = 1;
+
+            base.load.apply(this, arguments);
+        },
+
+        /* Used to change options dynamically after initialization.
+        *************************************************************************/
+        _setOption: function (key, value) {
+            base._setOption.apply(this, arguments);
+
+            if (key == 'pageSize') {
+                this._changePageSize(parseInt(value));
+            }
+        },
+
+        /* Changes current page size with given value.
+        *************************************************************************/
+        _changePageSize: function (pageSize) {
+            if (pageSize == this.options.pageSize) {
+                return;
+            }
+
+            this.options.pageSize = pageSize;
+
+            //Normalize current page
+            var pageCount = this._calculatePageCount();
+            if (this._currentPageNo > pageCount) {
+                this._currentPageNo = pageCount;
+            }
+
+            //if user sets one of the options on the combobox, then select it.
+            var $pageSizeChangeCombobox = this._$bottomPanel.find('.jtable-page-size-change select');
+            if ($pageSizeChangeCombobox.length > 0) {
+                if (parseInt($pageSizeChangeCombobox.val()) != pageSize) {
+                    var selectedOption = $pageSizeChangeCombobox.find('option[value=' + pageSize + ']');
+                    if (selectedOption.length > 0) {
+                        $pageSizeChangeCombobox.val(pageSize);
+                    }
+                }
+            }
+
+            this._reloadTable();
+        },
+
+        /* Overrides _createRecordLoadUrl method to add paging info to URL.
+        *************************************************************************/
+        _createRecordLoadUrl: function () {
+            var loadUrl = base._createRecordLoadUrl.apply(this, arguments);
+            loadUrl = this._addPagingInfoToUrl(loadUrl, this._currentPageNo);
+            return loadUrl;
+        },
+
+        /* Overrides _addRowToTable method to re-load table when a new row is created.
+        * NOTE: THIS METHOD IS DEPRECATED AND WILL BE REMOVED FROM FEATURE RELEASES.
+        * USE _addRow METHOD.
+        *************************************************************************/
+        _addRowToTable: function ($tableRow, index, isNewRow) {
+            if (isNewRow && this.options.paging) {
+                this._reloadTable();
+                return;
+            }
+
+            base._addRowToTable.apply(this, arguments);
+        },
+
+        /* Overrides _addRow method to re-load table when a new row is created.
+        *************************************************************************/
+        _addRow: function ($row, options) {
+            if (options && options.isNewRow && this.options.paging) {
+                this._reloadTable();
+                return;
+            }
+
+            base._addRow.apply(this, arguments);
+        },
+
+        /* Overrides _removeRowsFromTable method to re-load table when a row is removed from table.
+        *************************************************************************/
+        _removeRowsFromTable: function ($rows, reason) {
+            base._removeRowsFromTable.apply(this, arguments);
+
+            if (this.options.paging) {
+                if (this._$tableRows.length <= 0 && this._currentPageNo > 1) {
+                    --this._currentPageNo;
+                }
+
+                this._reloadTable();
+            }
+        },
+
+        /* Overrides _onRecordsLoaded method to to do paging specific tasks.
+        *************************************************************************/
+        _onRecordsLoaded: function (data) {
+            this._totalRecordCount = data.TotalRecordCount;
+            this._createPagingList();
+            this._createPagingInfo();
+            this._refreshGotoPageInput();
+            base._onRecordsLoaded.apply(this, arguments);
+        },
+
+        /************************************************************************
+        * PRIVATE METHODS                                                       *
+        *************************************************************************/
+
+        /* Adds jtStartIndex and jtPageSize parameters to a URL as query string.
+        *************************************************************************/
+        _addPagingInfoToUrl: function (url, pageNumber) {
+            if (!this.options.paging) {
+                return url;
+            }
+
+            var jtStartIndex = (pageNumber - 1) * this.options.pageSize;
+            var jtPageSize = this.options.pageSize;
+
+            return (url + (url.indexOf('?') < 0 ? '?' : '&') + 'jtStartIndex=' + jtStartIndex + '&jtPageSize=' + jtPageSize);
+        },
+
+        /* Creates and shows the page list.
+        *************************************************************************/
+        _createPagingList: function () {
+            if (!this.options.paging || this.options.pageSize <= 0) {
+                return;
+            }
+
+            this._$pagingListArea.empty();
+            if (this._totalRecordCount <= 0) {
+                return;
+            }
+
+            var pageCount = this._calculatePageCount();
+
+            this._createFirstAndPreviousPageButtons();
+            if (this.options.pageList == 'normal') {
+                this._createPageNumberButtons(this._calculatePageNumbers(pageCount));
+            }
+            this._createLastAndNextPageButtons(pageCount);
+            this._bindClickEventsToPageNumberButtons();
+        },
+
+        /* Creates and shows previous and first page links.
+        *************************************************************************/
+        _createFirstAndPreviousPageButtons: function () {
+            var $first = $('<span></span>')
+                .addClass('jtable-page-number-first')
+                .html('&lt&lt')
+                .data('pageNumber', 1)
+                .appendTo(this._$pagingListArea);
+            
+            var $previous = $('<span></span>')
+                .addClass('jtable-page-number-previous')
+                .html('&lt')
+                .data('pageNumber', this._currentPageNo - 1)
+                .appendTo(this._$pagingListArea);
+            
+            if (this._currentPageNo <= 1) {
+                $first.addClass('jtable-page-number-disabled');
+                $previous.addClass('jtable-page-number-disabled');
+            }
+        },
+
+        /* Creates and shows next and last page links.
+        *************************************************************************/
+        _createLastAndNextPageButtons: function (pageCount) {
+            var $next = $('<span></span>')
+                .addClass('jtable-page-number-next')
+                .html('&gt')
+                .data('pageNumber', this._currentPageNo + 1)
+                .appendTo(this._$pagingListArea);
+            var $last = $('<span></span>')
+                .addClass('jtable-page-number-last')
+                .html('&gt&gt')
+                .data('pageNumber', pageCount)
+                .appendTo(this._$pagingListArea);
+
+            if (this._currentPageNo >= pageCount) {
+                $next.addClass('jtable-page-number-disabled');
+                $last.addClass('jtable-page-number-disabled');
+            }
+        },
+
+        /* Creates and shows page number links for given number array.
+        *************************************************************************/
+        _createPageNumberButtons: function (pageNumbers) {
+            var previousNumber = 0;
+            for (var i = 0; i < pageNumbers.length; i++) {
+                //Create "..." between page numbers if needed
+                if ((pageNumbers[i] - previousNumber) > 1) {
+                    $('<span></span>')
+                        .addClass('jtable-page-number-space')
+                        .html('...')
+                        .appendTo(this._$pagingListArea);
+                }
+
+                this._createPageNumberButton(pageNumbers[i]);
+                previousNumber = pageNumbers[i];
+            }
+        },
+
+        /* Creates a page number link and adds to paging area.
+        *************************************************************************/
+        _createPageNumberButton: function (pageNumber) {
+            var $pageNumber = $('<span></span>')
+                .addClass('jtable-page-number')
+                .html(pageNumber)
+                .data('pageNumber', pageNumber)
+                .appendTo(this._$pagingListArea);
+            
+            if(this._currentPageNo == pageNumber) {
+                $pageNumber.addClass('jtable-page-number-active');
+                $pageNumber.addClass('jtable-page-number-disabled');
+            }
+        },
+
+        /* Calculates total page count according to page size and total record count.
+        *************************************************************************/
+        _calculatePageCount: function () {
+            var pageCount = Math.floor(this._totalRecordCount / this.options.pageSize);
+            if (this._totalRecordCount % this.options.pageSize != 0) {
+                ++pageCount;
+            }
+
+            return pageCount;
+        },
+
+        /* Calculates page numbers and returns an array of these numbers.
+        *************************************************************************/
+        _calculatePageNumbers: function (pageCount) {
+            if (pageCount <= 4) {
+                //Show all pages
+                var pageNumbers = [];
+                for (var i = 1; i <= pageCount; ++i) {
+                    pageNumbers.push(i);
+                }
+
+                return pageNumbers;
+            } else {
+                //show first three, last three, current, previous and next page numbers
+                var shownPageNumbers = [1, 2, pageCount - 1, pageCount];
+                var previousPageNo = this._normalizeNumber(this._currentPageNo - 1, 1, pageCount, 1);
+                var nextPageNo = this._normalizeNumber(this._currentPageNo + 1, 1, pageCount, 1);
+
+                this._insertToArrayIfDoesNotExists(shownPageNumbers, previousPageNo);
+                this._insertToArrayIfDoesNotExists(shownPageNumbers, this._currentPageNo);
+                this._insertToArrayIfDoesNotExists(shownPageNumbers, nextPageNo);
+
+                shownPageNumbers.sort(function (a, b) { return a - b; });
+                return shownPageNumbers;
+            }
+        },
+
+        /* Creates and shows paging informations.
+        *************************************************************************/
+        _createPagingInfo: function () {
+            if (this._totalRecordCount <= 0) {
+                this._$pageInfoSpan.empty();
+                return;
+            }
+
+            var startNo = (this._currentPageNo - 1) * this.options.pageSize + 1;
+            var endNo = this._currentPageNo * this.options.pageSize;
+            endNo = this._normalizeNumber(endNo, startNo, this._totalRecordCount, 0);
+
+            if (endNo >= startNo) {
+                var pagingInfoMessage = this._formatString(this.options.messages.pagingInfo, startNo, endNo, this._totalRecordCount);
+                this._$pageInfoSpan.html(pagingInfoMessage);
+            }
+        },
+
+        /* Binds click events of all page links to change the page.
+        *************************************************************************/
+        _bindClickEventsToPageNumberButtons: function () {
+            var self = this;
+            self._$pagingListArea
+                .find('.jtable-page-number,.jtable-page-number-previous,.jtable-page-number-next,.jtable-page-number-first,.jtable-page-number-last')
+                .not('.jtable-page-number-disabled')
+                .click(function (e) {
+                    e.preventDefault();
+                    self._changePage($(this).data('pageNumber'));
+                });
+        },
+
+        /* Changes current page tp given value.
+        *************************************************************************/
+        _changePage: function (pageNo) {
+            pageNo = this._normalizeNumber(pageNo, 1, this._calculatePageCount(), 1);
+            if (pageNo == this._currentPageNo) {
+                this._refreshGotoPageInput();
+                return;
+            }
+
+            this._currentPageNo = pageNo;
+            this._reloadTable();
+        }
+
+    });
+
+})(jQuery);