From 4bd060d9008be3a16d695d1360b921ff13d32409 Mon Sep 17 00:00:00 2001 From: Matthew Hasbach Date: Fri, 13 Mar 2015 21:33:57 -0400 Subject: [PATCH 1/5] Added conditional pagination plugin --- .../dataTables.conditionalPagination.js | 70 +++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 features/conditionalPagination/dataTables.conditionalPagination.js diff --git a/features/conditionalPagination/dataTables.conditionalPagination.js b/features/conditionalPagination/dataTables.conditionalPagination.js new file mode 100644 index 0000000..e7d72a0 --- /dev/null +++ b/features/conditionalPagination/dataTables.conditionalPagination.js @@ -0,0 +1,70 @@ +/** + * @summary ConditionalPagination + * @description Hide pagination controls when the amount of pages is <= 1 + * @version 1.0.0 + * @file dataTables.conditionalPagination.js + * @author Matthew Hasbach (https://github.com/mjhasbach) + * @contact hasbach.git@gmail.com + * @copyright Copyright 2015 Matthew Hasbach + * + * License MIT - http://datatables.net/license/mit + * + * This feature plugin for DataTables hides pagination controls when the amount + * of pages is <= 1. The controls can either appear / disappear or fade in / out + * + * @example + * $('#myTable').DataTable({ + * conditionalPagination: { + * enable: true, + * fade: { + * enable: true, + * speed: 'fast' + * } + * } + * }); + */ + +(function(window, document, $) { + $(document).on('init.dt', function(e, settings) { + if ($.isPlainObject(settings.oInit.conditionalPagination) && settings.oInit.conditionalPagination.enable) { + var api = new $.fn.dataTable.Api(settings), + fade = settings.oInit.conditionalPagination.fade, + fadeSpeed = 'slow', + fadeEnable = false, + conditionalPagination = function() { + var $pagination = $(api.table().container()).find('div.dataTables_paginate'); + + if (api.page.info().pages <= 1) { + if (fadeEnable) { + $pagination.stop().fadeOut(fadeSpeed); + } + else { + $pagination.hide(); + } + } + else { + if (fadeEnable) { + $pagination.stop().fadeIn(fadeSpeed); + } + else { + $pagination.show(); + } + } + }; + + if ($.isPlainObject(fade)) { + if (fade.enable === true) { + fadeEnable = true; + } + + if ($.isNumeric(fade.speed) || $.type(fade.speed) === 'string') { + fadeSpeed = fade.speed; + } + } + + conditionalPagination(); + + api.on('draw.dt', conditionalPagination); + } + }); +})(window, document, jQuery); \ No newline at end of file From 6ada1d0def9601625cf7c242b7933a251c67f03b Mon Sep 17 00:00:00 2001 From: Matthew Hasbach Date: Sun, 22 Mar 2015 15:17:30 -0400 Subject: [PATCH 2/5] Changed plugin usage (enabled properties are no longer required) --- .../dataTables.conditionalPagination.js | 51 +++++++++---------- 1 file changed, 24 insertions(+), 27 deletions(-) diff --git a/features/conditionalPagination/dataTables.conditionalPagination.js b/features/conditionalPagination/dataTables.conditionalPagination.js index e7d72a0..b259c31 100644 --- a/features/conditionalPagination/dataTables.conditionalPagination.js +++ b/features/conditionalPagination/dataTables.conditionalPagination.js @@ -13,38 +13,41 @@ * of pages is <= 1. The controls can either appear / disappear or fade in / out * * @example - * $('#myTable').DataTable({ - * conditionalPagination: { - * enable: true, - * fade: { - * enable: true, - * speed: 'fast' - * } - * } - * }); + * $('#myTable').DataTable({ + * conditionalPagination: true + * }); + * + * @example + * $('#myTable').DataTable({ + * conditionalPagination: { + * style: 'fade', + * speed: 500 // optional + * } + * }); */ (function(window, document, $) { - $(document).on('init.dt', function(e, settings) { - if ($.isPlainObject(settings.oInit.conditionalPagination) && settings.oInit.conditionalPagination.enable) { - var api = new $.fn.dataTable.Api(settings), - fade = settings.oInit.conditionalPagination.fade, - fadeSpeed = 'slow', - fadeEnable = false, + $(document).on('init.dt', function(e, dtSettings) { + var options = dtSettings.oInit.conditionalPagination; + + if ($.isPlainObject(options) || options === true) { + var config = $.isPlainObject(options) ? options : {}, + api = new $.fn.dataTable.Api(dtSettings), + speed = 'slow', conditionalPagination = function() { var $pagination = $(api.table().container()).find('div.dataTables_paginate'); if (api.page.info().pages <= 1) { - if (fadeEnable) { - $pagination.stop().fadeOut(fadeSpeed); + if (config.style === 'fade') { + $pagination.stop().fadeOut(speed); } else { $pagination.hide(); } } else { - if (fadeEnable) { - $pagination.stop().fadeIn(fadeSpeed); + if (config.style === 'fade') { + $pagination.stop().fadeIn(speed); } else { $pagination.show(); @@ -52,14 +55,8 @@ } }; - if ($.isPlainObject(fade)) { - if (fade.enable === true) { - fadeEnable = true; - } - - if ($.isNumeric(fade.speed) || $.type(fade.speed) === 'string') { - fadeSpeed = fade.speed; - } + if ($.isNumeric(config.speed) || $.type(config.speed) === 'string') { + speed = config.speed; } conditionalPagination(); From 5ba0987f52689ae13fca041f1e82a728d60675f4 Mon Sep 17 00:00:00 2001 From: Matthew Hasbach Date: Sun, 22 Mar 2015 15:24:17 -0400 Subject: [PATCH 3/5] Use fadeTo instead of fadeIn / fadeOut and CSS visibility instead of show / hide in order to preserve page layout --- .../dataTables.conditionalPagination.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/features/conditionalPagination/dataTables.conditionalPagination.js b/features/conditionalPagination/dataTables.conditionalPagination.js index b259c31..fc64037 100644 --- a/features/conditionalPagination/dataTables.conditionalPagination.js +++ b/features/conditionalPagination/dataTables.conditionalPagination.js @@ -39,18 +39,18 @@ if (api.page.info().pages <= 1) { if (config.style === 'fade') { - $pagination.stop().fadeOut(speed); + $pagination.stop().fadeTo(speed, 0); } else { - $pagination.hide(); + $pagination.css('visibility', 'hidden'); } } else { if (config.style === 'fade') { - $pagination.stop().fadeIn(speed); + $pagination.stop().fadeTo(speed, 1); } else { - $pagination.show(); + $pagination.css('visibility', ''); } } }; From 6dd3a6c99994fd739e3f39b411607c4d32f0349d Mon Sep 17 00:00:00 2001 From: Matthew Hasbach Date: Sun, 22 Mar 2015 15:29:59 -0400 Subject: [PATCH 4/5] Changed occurrences of the term "pagination" to "paging". Renamed plugin to dataTables.conditionalPaging. --- .../dataTables.conditionalPaging.js} | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) rename features/{conditionalPagination/dataTables.conditionalPagination.js => conditionalPaging/dataTables.conditionalPaging.js} (60%) diff --git a/features/conditionalPagination/dataTables.conditionalPagination.js b/features/conditionalPaging/dataTables.conditionalPaging.js similarity index 60% rename from features/conditionalPagination/dataTables.conditionalPagination.js rename to features/conditionalPaging/dataTables.conditionalPaging.js index fc64037..d5abad3 100644 --- a/features/conditionalPagination/dataTables.conditionalPagination.js +++ b/features/conditionalPaging/dataTables.conditionalPaging.js @@ -1,25 +1,25 @@ /** - * @summary ConditionalPagination - * @description Hide pagination controls when the amount of pages is <= 1 + * @summary ConditionalPaging + * @description Hide paging controls when the amount of pages is <= 1 * @version 1.0.0 - * @file dataTables.conditionalPagination.js + * @file dataTables.conditionalPaging.js * @author Matthew Hasbach (https://github.com/mjhasbach) * @contact hasbach.git@gmail.com * @copyright Copyright 2015 Matthew Hasbach * * License MIT - http://datatables.net/license/mit * - * This feature plugin for DataTables hides pagination controls when the amount + * This feature plugin for DataTables hides paging controls when the amount * of pages is <= 1. The controls can either appear / disappear or fade in / out * * @example * $('#myTable').DataTable({ - * conditionalPagination: true + * conditionalPaging: true * }); * * @example * $('#myTable').DataTable({ - * conditionalPagination: { + * conditionalPaging: { * style: 'fade', * speed: 500 // optional * } @@ -28,29 +28,29 @@ (function(window, document, $) { $(document).on('init.dt', function(e, dtSettings) { - var options = dtSettings.oInit.conditionalPagination; + var options = dtSettings.oInit.conditionalPaging; if ($.isPlainObject(options) || options === true) { var config = $.isPlainObject(options) ? options : {}, api = new $.fn.dataTable.Api(dtSettings), speed = 'slow', - conditionalPagination = function() { - var $pagination = $(api.table().container()).find('div.dataTables_paginate'); + conditionalPaging = function() { + var $paging = $(api.table().container()).find('div.dataTables_paginate'); if (api.page.info().pages <= 1) { if (config.style === 'fade') { - $pagination.stop().fadeTo(speed, 0); + $paging.stop().fadeTo(speed, 0); } else { - $pagination.css('visibility', 'hidden'); + $paging.css('visibility', 'hidden'); } } else { if (config.style === 'fade') { - $pagination.stop().fadeTo(speed, 1); + $paging.stop().fadeTo(speed, 1); } else { - $pagination.css('visibility', ''); + $paging.css('visibility', ''); } } }; @@ -59,9 +59,9 @@ speed = config.speed; } - conditionalPagination(); + conditionalPaging(); - api.on('draw.dt', conditionalPagination); + api.on('draw.dt', conditionalPaging); } }); })(window, document, jQuery); \ No newline at end of file From cbad0bd29384642426d890bcbdaf7ddbf222b441 Mon Sep 17 00:00:00 2001 From: Matthew Hasbach Date: Sun, 22 Mar 2015 16:23:33 -0400 Subject: [PATCH 5/5] Fixed a bug in which the paging controls would fade out after table initialization if the "fade" style was chosen --- .../dataTables.conditionalPaging.js | 29 +++++++++++++------ 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/features/conditionalPaging/dataTables.conditionalPaging.js b/features/conditionalPaging/dataTables.conditionalPaging.js index d5abad3..0b1ef37 100644 --- a/features/conditionalPaging/dataTables.conditionalPaging.js +++ b/features/conditionalPaging/dataTables.conditionalPaging.js @@ -34,23 +34,34 @@ var config = $.isPlainObject(options) ? options : {}, api = new $.fn.dataTable.Api(dtSettings), speed = 'slow', - conditionalPaging = function() { - var $paging = $(api.table().container()).find('div.dataTables_paginate'); + conditionalPaging = function(e) { + var $paging = $(api.table().container()).find('div.dataTables_paginate'), + pages = api.page.info().pages; - if (api.page.info().pages <= 1) { - if (config.style === 'fade') { - $paging.stop().fadeTo(speed, 0); + if ($.isPlainObject(e)) { + if (pages <= 1) { + if (config.style === 'fade') { + $paging.stop().fadeTo(speed, 0); + } + else { + $paging.css('visibility', 'hidden'); + } } else { - $paging.css('visibility', 'hidden'); + if (config.style === 'fade') { + $paging.stop().fadeTo(speed, 1); + } + else { + $paging.css('visibility', ''); + } } } - else { + else if (pages <= 1) { if (config.style === 'fade') { - $paging.stop().fadeTo(speed, 1); + $paging.css('opacity', 0); } else { - $paging.css('visibility', ''); + $paging.css('visibility', 'hidden'); } } };