From bb0a6140b181b65f395f440abf8225325c39fffc Mon Sep 17 00:00:00 2001 From: David Kennedy Date: Mon, 15 Apr 2013 17:37:08 -0600 Subject: [PATCH 1/6] Added ellipses.js to pagination folder --- pagination/ellipses.js | 152 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 152 insertions(+) create mode 100644 pagination/ellipses.js diff --git a/pagination/ellipses.js b/pagination/ellipses.js new file mode 100644 index 0000000..7c01577 --- /dev/null +++ b/pagination/ellipses.js @@ -0,0 +1,152 @@ +/* + * This plug-in adds another pagination option called ellipses. + * This will render the pagination control similar to the full_numbers option, + * except it will add ellipses around the page numbers when applicable. + * You can set how many page numbers should be displayed with the iShowPages option. + * This plug-in also extends the oClasses object with the following properties: + * sPageEllipsis, sPageNumber and sPageNumbers. + * Finally, this plug-in extends the oSettings object with the following properties: + * _iShowPages, _iCurrentPage, _iTotalPages, _iShowPagesHalf, _iFirstPage and _iLastPage. + * + * @name Ellipses + * @anchor ellipses + * @author Dave Kennedy + * @example + * $('#my-table').dataTable({ + * // Optional usage of extended oSettings object + * 'fnInfoCallback': function(oSettings) { + * return 'Viewing page ' + oSettings._iCurrentPage + ' of ' + oSettings._iTotalPages; + * }, + * // Optional usage of iShowPages option + * 'iShowPages': 15, + * // This is the only required line + * 'sPaginationType': 'ellipses' + * }); + */ + +$.extend($.fn.dataTableExt.oStdClasses, { + 'sPageEllipsis': 'paginate_ellipsis', + 'sPageNumber': 'paginate_number', + 'sPageNumbers': 'paginate_numbers' +}); + +$.extend($.fn.dataTableExt.oJUIClasses, { + 'sPageEllipsis': 'paginate_ellipsis', + 'sPageNumber': 'paginate_number', + 'sPageNumbers': 'paginate_numbers' +}); + +$.fn.dataTableExt.oPagination.ellipses = { + 'fnClickHandler': function(e) { + var fnCallbackDraw = e.data.fnCallbackDraw, + oSettings = e.data.oSettings, + sPage = e.data.sPage; + + if ($(this).is('[disabled]')) { + return false; + } + + oSettings.oApi._fnPageChange(oSettings, sPage); + fnCallbackDraw(oSettings); + return true; + }, + 'fnInit': function(oSettings, nPager, fnCallbackDraw) { + var oClasses = oSettings.oClasses, + oLang = oSettings.oLanguage.oPaginate, + that = this; + + this.nPager = $(nPager); + + this.nFirst = $('' + oLang.sFirst + ''); + this.nPrevious = $('' + oLang.sPrevious + ''); + this.nNext = $('' + oLang.sNext + ''); + this.nLast = $('' + oLang.sLast + ''); + + this.nFirst.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'first' }, that.fnClickHandler); + this.nPrevious.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'previous' }, that.fnClickHandler); + this.nNext.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'next' }, that.fnClickHandler); + this.nLast.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'last' }, that.fnClickHandler); + + this.nNumbers = $(''); + + // Render + this.nPager.append(this.nFirst, this.nPrevious, this.nNumbers, this.nNext, this.nLast); + }, + 'fnUpdate': function(oSettings, fnCallbackDraw) { + var oClasses = oSettings.oClasses, + that = this; + + // If iShowPages wasn't included in initialisation options, + // use default value in global object + var iShowPages = oSettings.oInit.iShowPages || 5; + + var iCurrentPage = Math.ceil((oSettings._iDisplayStart + 1) / oSettings._iDisplayLength), + iTotalPages = Math.ceil(oSettings.fnRecordsTotal() / oSettings._iDisplayLength), + iShowPagesHalf = Math.floor(iShowPages / 2), + iFirstPage = iCurrentPage - iShowPagesHalf, + iLastPage = iCurrentPage + iShowPagesHalf; + + if (iTotalPages < iShowPages) { + iFirstPage = 1; + iLastPage = iTotalPages; + } else if (iFirstPage < 1) { + iFirstPage = 1; + iLastPage = iShowPages; + } else if (iLastPage > iTotalPages) { + iFirstPage = (iTotalPages - iShowPages) + 1; + iLastPage = iTotalPages; + } + + // Add these properties to oSettings so we can use them later + $.extend(oSettings, { + _iShowPages: iShowPages, + _iCurrentPage: iCurrentPage, + _iTotalPages: iTotalPages, + _iShowPagesHalf: iShowPagesHalf, + _iFirstPage: iFirstPage, + _iLastPage: iLastPage + }); + + if (iCurrentPage === 1) { + this.nFirst.attr('disabled', true); + this.nPrevious.attr('disabled', true); + } else { + this.nFirst.removeAttr('disabled'); + this.nPrevious.removeAttr('disabled'); + } + + if (iCurrentPage === iTotalPages) { + this.nNext.attr('disabled', true); + this.nLast.attr('disabled', true); + } else { + this.nNext.removeAttr('disabled'); + this.nLast.removeAttr('disabled'); + } + + // Erase and render + this.nNumbers.html(''); + + var i, nNumber; + + for (i = iFirstPage; i <= iLastPage; i++) { + nNumber = $('' + oSettings.fnFormatNumber(i) + ''); + + if (iCurrentPage === i) { + nNumber.attr('active', true).attr('disabled', true); + } else { + nNumber.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': i - 1 }, that.fnClickHandler); + } + + this.nNumbers.append(nNumber); + } + + // Add ellipses + if (1 < iFirstPage) { + this.nNumbers.prepend('...'); + } + + if (iLastPage < iTotalPages) { + this.nNumbers.append('...'); + } + } +}; \ No newline at end of file From b945ef47d62d69bd37f8b536e8bc7b33041a1a4d Mon Sep 17 00:00:00 2001 From: David Kennedy Date: Tue, 16 Apr 2013 14:48:49 -0600 Subject: [PATCH 2/6] Added support for multiple pagination controls on the same page, which basically changed everything; Removed needless extension of oJUIClasses object; Added oDefaults property to ellipses object so it's clear where defaults are set; Added fnUpdateState property to ellipses object so we can access current state info before fnUpdate is called --- pagination/ellipses.js | 163 +++++++++++++++++++++-------------------- 1 file changed, 84 insertions(+), 79 deletions(-) diff --git a/pagination/ellipses.js b/pagination/ellipses.js index 7c01577..9f3bba3 100644 --- a/pagination/ellipses.js +++ b/pagination/ellipses.js @@ -1,13 +1,12 @@ /* - * This plug-in adds another pagination option called ellipses. - * This will render the pagination control similar to the full_numbers option, - * except it will add ellipses around the page numbers when applicable. + * This plug-in adds another pagination option similar to full_numbers, + * except it adds ellipses around the page numbers when applicable. * You can set how many page numbers should be displayed with the iShowPages option. - * This plug-in also extends the oClasses object with the following properties: + * This plug-in extends the oStdClasses object with the following properties: * sPageEllipsis, sPageNumber and sPageNumbers. - * Finally, this plug-in extends the oSettings object with the following properties: - * _iShowPages, _iCurrentPage, _iTotalPages, _iShowPagesHalf, _iFirstPage and _iLastPage. - * + * It also extends the oSettings object with the following properties: + * _iShowPages, _iShowPagesHalf, _iCurrentPage, _iTotalPages, _iFirstPage and _iLastPage. + * * @name Ellipses * @anchor ellipses * @author Dave Kennedy @@ -15,11 +14,13 @@ * $('#my-table').dataTable({ * // Optional usage of extended oSettings object * 'fnInfoCallback': function(oSettings) { + * // Update stateful properties + * $.fn.dataTableExt.oPagination.ellipses.fnUpdateState(oSettings); * return 'Viewing page ' + oSettings._iCurrentPage + ' of ' + oSettings._iTotalPages; * }, * // Optional usage of iShowPages option * 'iShowPages': 15, - * // This is the only required line + * // This is the only required option * 'sPaginationType': 'ellipses' * }); */ @@ -30,13 +31,10 @@ $.extend($.fn.dataTableExt.oStdClasses, { 'sPageNumbers': 'paginate_numbers' }); -$.extend($.fn.dataTableExt.oJUIClasses, { - 'sPageEllipsis': 'paginate_ellipsis', - 'sPageNumber': 'paginate_number', - 'sPageNumbers': 'paginate_numbers' -}); - $.fn.dataTableExt.oPagination.ellipses = { + 'oDefaults': { + 'iShowPages': 5 + }, 'fnClickHandler': function(e) { var fnCallbackDraw = e.data.fnCallbackDraw, oSettings = e.data.oSettings, @@ -48,105 +46,112 @@ $.fn.dataTableExt.oPagination.ellipses = { oSettings.oApi._fnPageChange(oSettings, sPage); fnCallbackDraw(oSettings); + return true; }, + // fnInit is called once for each instance of pager 'fnInit': function(oSettings, nPager, fnCallbackDraw) { var oClasses = oSettings.oClasses, oLang = oSettings.oLanguage.oPaginate, that = this; - this.nPager = $(nPager); + var iShowPages = oSettings.oInit.iShowPages || this.oDefaults.iShowPages, + iShowPagesHalf = Math.floor(iShowPages / 2); - this.nFirst = $('' + oLang.sFirst + ''); - this.nPrevious = $('' + oLang.sPrevious + ''); - this.nNext = $('' + oLang.sNext + ''); - this.nLast = $('' + oLang.sLast + ''); + $.extend(oSettings, { + _iShowPages: iShowPages, + _iShowPagesHalf: iShowPagesHalf, + }); - this.nFirst.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'first' }, that.fnClickHandler); - this.nPrevious.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'previous' }, that.fnClickHandler); - this.nNext.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'next' }, that.fnClickHandler); - this.nLast.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'last' }, that.fnClickHandler); + var oFirst = $('' + oLang.sFirst + ''), + oPrevious = $('' + oLang.sPrevious + ''), + oNumbers = $(''), + oNext = $('' + oLang.sNext + ''), + oLast = $('' + oLang.sLast + ''); - this.nNumbers = $(''); + oFirst.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'first' }, that.fnClickHandler); + oPrevious.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'previous' }, that.fnClickHandler); + oNext.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'next' }, that.fnClickHandler); + oLast.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'last' }, that.fnClickHandler); - // Render - this.nPager.append(this.nFirst, this.nPrevious, this.nNumbers, this.nNext, this.nLast); + // Draw + $(nPager).append(oFirst, oPrevious, oNumbers, oNext, oLast); }, + // fnUpdate is only called once while table is rendered 'fnUpdate': function(oSettings, fnCallbackDraw) { var oClasses = oSettings.oClasses, that = this; - // If iShowPages wasn't included in initialisation options, - // use default value in global object - var iShowPages = oSettings.oInit.iShowPages || 5; + // Update stateful properties + this.fnUpdateState(oSettings); - var iCurrentPage = Math.ceil((oSettings._iDisplayStart + 1) / oSettings._iDisplayLength), - iTotalPages = Math.ceil(oSettings.fnRecordsTotal() / oSettings._iDisplayLength), - iShowPagesHalf = Math.floor(iShowPages / 2), - iFirstPage = iCurrentPage - iShowPagesHalf, - iLastPage = iCurrentPage + iShowPagesHalf; - - if (iTotalPages < iShowPages) { - iFirstPage = 1; - iLastPage = iTotalPages; - } else if (iFirstPage < 1) { - iFirstPage = 1; - iLastPage = iShowPages; - } else if (iLastPage > iTotalPages) { - iFirstPage = (iTotalPages - iShowPages) + 1; - iLastPage = iTotalPages; - } - - // Add these properties to oSettings so we can use them later - $.extend(oSettings, { - _iShowPages: iShowPages, - _iCurrentPage: iCurrentPage, - _iTotalPages: iTotalPages, - _iShowPagesHalf: iShowPagesHalf, - _iFirstPage: iFirstPage, - _iLastPage: iLastPage - }); - - if (iCurrentPage === 1) { - this.nFirst.attr('disabled', true); - this.nPrevious.attr('disabled', true); + if (oSettings._iCurrentPage === 1) { + $('.' + oClasses.sPageFirst).attr('disabled', true); + $('.' + oClasses.sPagePrevious).attr('disabled', true); } else { - this.nFirst.removeAttr('disabled'); - this.nPrevious.removeAttr('disabled'); + $('.' + oClasses.sPageFirst).removeAttr('disabled'); + $('.' + oClasses.sPagePrevious).removeAttr('disabled'); } - if (iCurrentPage === iTotalPages) { - this.nNext.attr('disabled', true); - this.nLast.attr('disabled', true); + if (oSettings._iCurrentPage === oSettings._iTotalPages) { + $('.' + oClasses.sPageNext).attr('disabled', true); + $('.' + oClasses.sPageLast).attr('disabled', true); } else { - this.nNext.removeAttr('disabled'); - this.nLast.removeAttr('disabled'); + $('.' + oClasses.sPageNext).removeAttr('disabled'); + $('.' + oClasses.sPageLast).removeAttr('disabled'); } - // Erase and render - this.nNumbers.html(''); + var i, oNumber, oNumbers = $('.' + oClasses.sPageNumbers); - var i, nNumber; + // Erase + oNumbers.html(''); - for (i = iFirstPage; i <= iLastPage; i++) { - nNumber = $('' + oSettings.fnFormatNumber(i) + ''); + for (i = oSettings._iFirstPage; i <= oSettings._iLastPage; i++) { + oNumber = $('' + oSettings.fnFormatNumber(i) + ''); - if (iCurrentPage === i) { - nNumber.attr('active', true).attr('disabled', true); + if (oSettings._iCurrentPage === i) { + oNumber.attr('active', true).attr('disabled', true); } else { - nNumber.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': i - 1 }, that.fnClickHandler); + oNumber.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': i - 1 }, that.fnClickHandler); } - this.nNumbers.append(nNumber); + // Draw + oNumbers.append(oNumber); } // Add ellipses - if (1 < iFirstPage) { - this.nNumbers.prepend('...'); + if (1 < oSettings._iFirstPage) { + oNumbers.prepend('...'); } - if (iLastPage < iTotalPages) { - this.nNumbers.append('...'); + if (oSettings._iLastPage < oSettings._iTotalPages) { + oNumbers.append('...'); + } + }, + // fnUpdateState used to be part of fnUpdate + // The reason for moving is so we can access current state info before fnUpdate is called + 'fnUpdateState': function(oSettings) { + var iCurrentPage = Math.ceil((oSettings._iDisplayStart + 1) / oSettings._iDisplayLength), + iTotalPages = Math.ceil(oSettings.fnRecordsTotal() / oSettings._iDisplayLength), + iFirstPage = iCurrentPage - oSettings._iShowPagesHalf, + iLastPage = iCurrentPage + oSettings._iShowPagesHalf; + + if (iTotalPages < oSettings._iShowPages) { + iFirstPage = 1; + iLastPage = iTotalPages; + } else if (iFirstPage < 1) { + iFirstPage = 1; + iLastPage = oSettings._iShowPages; + } else if (iLastPage > iTotalPages) { + iFirstPage = (iTotalPages - oSettings._iShowPages) + 1; + iLastPage = iTotalPages; } + + $.extend(oSettings, { + _iCurrentPage: iCurrentPage, + _iTotalPages: iTotalPages, + _iFirstPage: iFirstPage, + _iLastPage: iLastPage + }); } }; \ No newline at end of file From bc9f1f3adce492fbdb5da200f81bca29773e214f Mon Sep 17 00:00:00 2001 From: Bruno Pierri Galvao Date: Sun, 21 Apr 2013 14:31:58 +0530 Subject: [PATCH 3/6] support for blank space my last commit was missing a paranthesis.. --- sorting/formatted-numbers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sorting/formatted-numbers.js b/sorting/formatted-numbers.js index 71307b0..fc6bd43 100644 --- a/sorting/formatted-numbers.js +++ b/sorting/formatted-numbers.js @@ -9,7 +9,7 @@ jQuery.extend( jQuery.fn.dataTableExt.oSort, { "formatted-num-pre": function ( a ) { - a = (a==="-") ? 0 : a.replace( /[^\d\-\.]/g, "" ); + a = (a === "-" || a === "") ? 0 : a.replace( /[^\d\-\.]/g, "" ); return parseFloat( a ); }, From 1d3707ad4385b87c614ec61a203af017bcd07fd2 Mon Sep 17 00:00:00 2001 From: Jeromy French Date: Fri, 17 May 2013 16:14:13 -0400 Subject: [PATCH 4/6] Addresses issue #17. --- sorting/date-dd-MMM-yyyy.js | 47 +++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 sorting/date-dd-MMM-yyyy.js diff --git a/sorting/date-dd-MMM-yyyy.js b/sorting/date-dd-MMM-yyyy.js new file mode 100644 index 0000000..6e6810f --- /dev/null +++ b/sorting/date-dd-MMM-yyyy.js @@ -0,0 +1,47 @@ +/* + * Adds a new sorting option to dataTables called date-dd-mmm-yyyy. Also + * includes a type detection plug-in. Matches and sorts date strings in + * the format: (dd/mmm/yyyy. For example: + *
    + *
  • 02-FEB-1978
    • + *
  • 17-MAY-2013
    • + *
  • 31-JAN-2014
    • + *
+ * + * @name Date dd-mmm-yyyy + * @anchor date-dd-mmm-yyyy + * @author Jeromy French + */ + +var customDateDDMMMYYYYToOrd = function (date) { + "use strict"; //let's avoid tom-foolery in this function + // Convert to a number YYYYMMDD which we can use to order + var dateParts = date.split(/-/); + return (dateParts[2] * 10000) + ($.inArray(dateParts[1].toUpperCase(), ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]) * 100) + dateParts[0]; +}; + +// This will help DataTables magic detect the "dd-MMM-yyyy" format; Unshift so that it's the first data type (so it takes priority over existing) +jQuery.fn.dataTableExt.aTypes.unshift( + function (sData) { + "use strict"; //let's avoid tom-foolery in this function + if (/^([0-2]?\d|3[0-1])-(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)-\d{4}/i.test(sData)) { + return 'date-dd-mmm-yyyy'; + } + return null; + } +); + +// define the sorts +jQuery.fn.dataTableExt.oSort['date-dd-mmm-yyyy-asc'] = function (a, b) { + "use strict"; //let's avoid tom-foolery in this function + var ordA = customDateDDMMMYYYYToOrd(a), + ordB = customDateDDMMMYYYYToOrd(b); + return (ordA < ordB) ? -1 : ((ordA > ordB) ? 1 : 0); +}; + +jQuery.fn.dataTableExt.oSort['date-dd-mmm-yyyy-desc'] = function (a, b) { + "use strict"; //let's avoid tom-foolery in this function + var ordA = customDateDDMMMYYYYToOrd(a), + ordB = customDateDDMMMYYYYToOrd(b); + return (ordA < ordB) ? 1 : ((ordA > ordB) ? -1 : 0); +}; \ No newline at end of file From 9d8562e3c865a9947830b90d84fd1a8d32b533c8 Mon Sep 17 00:00:00 2001 From: Allan Jardine Date: Thu, 23 May 2013 10:14:11 +0200 Subject: [PATCH 5/6] Fix description of fnDataUpdate plug-in method. --- api/fnDataUpdate.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/api/fnDataUpdate.js b/api/fnDataUpdate.js index 7fdd509..1b06a2b 100644 --- a/api/fnDataUpdate.js +++ b/api/fnDataUpdate.js @@ -1,8 +1,8 @@ /** * Update the internal data for a TR element based on what is used in the * DOM. You will likely want to call fnDraw() after this function. - * @name fnColumnIndexToVisible - * @anchor fnColumnIndexToVisible + * @name fnDataUpdate + * @anchor fnDataUpdate * @author Lior Gerson * * @example @@ -12,7 +12,7 @@ $.fn.dataTableExt.oApi.fnDataUpdate = function ( oSettings, nRowObject, iRowIndex ) { $(nRowObject).find("TD").each( function(i) { - var iColIndex = oSettings.oApi._fnVisibleToColumnIndex( oSettings, i ); - oSettings.oApi._fnSetCellData( oSettings, iRowIndex, iColIndex, $(this).html() ); + var iColIndex = oSettings.oApi._fnVisibleToColumnIndex( oSettings, i ); + oSettings.oApi._fnSetCellData( oSettings, iRowIndex, iColIndex, $(this).html() ); } ); }; From 7f1ebd84fc8c57abdc11b890fc3dd0fce0ea6f43 Mon Sep 17 00:00:00 2001 From: Matt Clements Date: Wed, 29 May 2013 15:20:58 +0200 Subject: [PATCH 6/6] Fixing CSS Typo --- integration/foundation/dataTables.foundation.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/integration/foundation/dataTables.foundation.css b/integration/foundation/dataTables.foundation.css index d4b0e3d..d1268a1 100644 --- a/integration/foundation/dataTables.foundation.css +++ b/integration/foundation/dataTables.foundation.css @@ -41,7 +41,7 @@ div.dataTables_paginate { table.dataTable { clear: both; - margin-bottom: 0.5em; !important; + margin-bottom: 0.5em !important; max-width: none !important; width: 100%; }