From 335a487a64328ccb600f6d361bd6558b7fa7a819 Mon Sep 17 00:00:00 2001 From: Garrett Hyder Date: Tue, 1 Sep 2020 22:51:44 -0700 Subject: [PATCH] Introduce a conditionalPageLength feature plugin based off of conditionalPaging to hide the page length control when <= 1 page. Also add sub option for contionalOptions to hide page length options that are > the current result size. --- .../dataTables.conditionalPageLength.js | 104 ++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 features/conditionalPageLength/dataTables.conditionalPageLength.js diff --git a/features/conditionalPageLength/dataTables.conditionalPageLength.js b/features/conditionalPageLength/dataTables.conditionalPageLength.js new file mode 100644 index 0000000..0f27d83 --- /dev/null +++ b/features/conditionalPageLength/dataTables.conditionalPageLength.js @@ -0,0 +1,104 @@ +/** + * @summary ConditionalPageLength + * @description Hide the page length control when the amount of pages is <= 1 + * @version 1.0.0 + * @file dataTables.conditionalPageLength.js + * @author Garrett Hyder (https://github.com/garretthyder) + * @contact garrett.m.hyder@gmail.com + * @copyright Copyright 2020 Garrett Hyder + * + * License MIT - http://datatables.net/license/mit + * + * This feature plugin for DataTables hides the page length control when the amount + * of pages is <= 1. The control can either appear / disappear or fade in / out. + * + * Based off conditionalPaging by Matthew Hasbach (https://github.com/mjhasbach) + * Reference: https://github.com/DataTables/Plugins/blob/master/features/conditionalPaging/dataTables.conditionalPaging.js + * + * @example + * $('#myTable').DataTable({ + * conditionalPageLength: true + * }); + * + * @example + * $('#myTable').DataTable({ + * conditionalPageLength: { + * style: 'fade', + * speed: 500 // optional + * } + * }); + * + * Conditionally hide the Page Length options that are less than the current result size. + * @example + * $('#myTable').DataTable({ + * conditionalPageLength: { + * conditionalOptions: true + * } + * }); + */ + +(function(window, document, $) { + $(document).on('init.dt', function(e, dtSettings) { + if ( e.namespace !== 'dt' ) { + return; + } + + var options = dtSettings.oInit.conditionalPageLength || $.fn.dataTable.defaults.conditionalPageLength; + + if ($.isPlainObject(options) || options === true) { + var config = $.isPlainObject(options) ? options : {}, + api = new $.fn.dataTable.Api(dtSettings), + speed = 'slow', + conditionalPageLength = function(e) { + var $paging = $(api.table().container()).find('div.dataTables_length'), + pages = api.page.info().pages, + size = api.rows({search:'applied'}).count(); + + if (e instanceof $.Event) { + if (pages <= 1) { + if (config.style === 'fade') { + $paging.stop().fadeTo(speed, 0); + } + else { + $paging.css('visibility', 'hidden'); + } + } + else { + if (config.style === 'fade') { + $paging.stop().fadeTo(speed, 1); + } + else { + $paging.css('visibility', ''); + } + } + } + else if (pages <= 1) { + if (config.style === 'fade') { + $paging.css('opacity', 0); + } + else { + $paging.css('visibility', 'hidden'); + } + } + + if (config.conditionalOptions) { + $paging.find('select option').each(function(index) { + if ($(this).attr('value') > size) { + $(this).hide(); + } else { + $(this).show(); + } + }); + } + }; + + if ( config.speed !== undefined ) { + speed = config.speed; + } + + conditionalPageLength(); + + api.on('draw.dt', conditionalPageLength); + } + }); +})(window, document, jQuery); \ No newline at end of file