Source: admin/javascript/engine/extensions/datatable_custom_pagination.js

/* --------------------------------------------------------------
 datatable_custom_pagination.js 2016-06-20
 Gambio GmbH
 http://www.gambio.de
 Copyright (c) 2016 Gambio GmbH
 Released under the GNU General Public License (Version 2)
 [http://www.gnu.org/licenses/gpl-2.0.html]
 --------------------------------------------------------------
 */

/**
 * ## Enable Custom DataTable Pagination
 *
 * This method will bind the appropriate event handlers to the HTML markup of the "datatables_page_length.html"
 * and the "datatables_page_navigation.html" templates. This module will also set a page parameter to the URL 
 * on page change but will not parse it upon initialization. This must happen from the module that initializes
 * the table.
 *
 * ### Options
 *
 * **Page Navigation Selector | `data-datatable_custom_pagination-page-navigation-selector` | String | Optional**
 *
 * Provide a selector for the page navigation container element. This option defaults to ".page-navigation" which
 * is also the class of the datatable_page_navigation.html template.
 *
 * **Page Length Selector | `data-datatable_custom_pagination-page-length-selector` | String | Optional**
 *
 * Provide a selector for the page length container element. This option defaults to ".page-length" which
 * is also the class of the datatable_page_length.html template.
 *
 * ### Events
 *
 * ```javascript
 * // Add custom callback once the page is changed (DataTable "info" object contains the new page information).
 * $('#datatable-instance').on('datatable_custom_pagination:page_change', function(event, info) { ... });
 *
 * // Add custom callback once the page length is changed (new page length is provided as second argument).
 * $('#datatable-instance').on('datatable_custom_pagination:length_change', function(event, newPageLength) { ... });
 * ```
 *
 * @module Admin/Extensions/datatable_custom_pagination
 */
gx.extensions.module('datatable_custom_pagination', [], function(data) {
	
	'use strict';
	
	// ------------------------------------------------------------------------
	// VARIABLES
	// ------------------------------------------------------------------------
	
	/**
	 * Module Selector
	 *
	 * @type {jQuery}
	 */
	const $this = $(this);
	
	/**
	 * Default Options
	 *
	 * @type {Object}
	 */
	const defaults = {
		pageNavigationSelector: '.page-navigation',
		pageLengthSelector: '.page-length'
	};
	
	/**
	 * Final Options
	 *
	 * @type {Object}
	 */
	const options = $.extend(true, {}, defaults, data);
	
	/**
	 * Page Navigation Selector
	 *
	 * @type {jQuery}
	 */
	const $pageNavigation = $this.find(options.pageNavigationSelector);
	
	/**
	 * Page Length Selector
	 *
	 * @type {jQuery}
	 */
	const $pageLength = $this.find(options.pageLengthSelector);
	
	/**
	 * Module Instance
	 *
	 * @type {Object}
	 */
	const module = {};
	
	// ------------------------------------------------------------------------
	// FUNCTIONS
	// ------------------------------------------------------------------------
	
	/**
	 * Update Page Navigation Elements
	 *
	 * Update the info text, set the correct button state and make sure the select box is up-to-date
	 * with the current page.
	 */
	function _onDataTableDraw() {
		const info = $this.DataTable().page.info();
		const text = $this.DataTable().i18n('sInfo')
			.replace('_START_', info.end !== 0 ? ++info.start : info.start)
			.replace('_END_', info.end)
			.replace('_TOTAL_', info.recordsDisplay);
		$pageNavigation.find('label').text(text);
		
		// Check if one of the buttons is disabled.
		$pageNavigation.find('.next').prop('disabled', (info.page === (info.pages - 1) || info.pages === 0));
		$pageNavigation.find('.previous').prop('disabled', (info.page === 0));
		
		// Fill in the pagination select box.
		const $select = $pageNavigation.find('select');
		
		$select.empty();
		
		for (let i = 1; i <= info.pages; i++) {
			$select.append(new Option(`${i} ${jse.core.lang.translate('from', 'admin_labels')} ${info.pages}`, i));
		}
		
		$select.val(info.page + 1);
		
		// Select the initial page length.
		$pageLength.find('select').val($this.DataTable().page.len());
	}
	
	/**
	 * On Page Navigation Select Change Event
	 */
	function _onPageNavigationSelectChange() {
		// Change the table page.
		$this.DataTable().page(Number($(this).val()) - 1).draw(false);
		
		// Trigger Event 
		const info = $this.DataTable().page.info();
		$this.trigger('datatable_custom_pagination:page_change', [info]);
	}
	
	/**
	 * On Page Navigation Button Click Event
	 */
	function _onPageNavigationButtonClick() {
		// Change the table page.
		const direction = $(this).hasClass('next') ? 'next' : 'previous';
		$this.DataTable().page(direction).draw(false);
		
		// Trigger Event 
		const info = $this.DataTable().page.info();
		$this.trigger('datatable_custom_pagination:page_change', [info]);
	}
	
	/**
	 * On Page Length Select Change Event
	 */
	function _onPageLengthSelectChange() {
		const newPageLength = Number($pageLength.find('select').val());
		$this.DataTable().page.len(newPageLength).page(0).draw(false);
		
		// Trigger Event 
		$this.trigger('datatable_custom_pagination:length_change', [newPageLength]);
	}
	
	// ------------------------------------------------------------------------
	// INITIALIZATION
	// ------------------------------------------------------------------------
	
	module.init = function(done) {
		$this
			.on('draw.dt', _onDataTableDraw);
		
		$pageNavigation
			.on('change', 'select', _onPageNavigationSelectChange)
			.on('click', 'button', _onPageNavigationButtonClick);
		
		$pageLength
			.on('change', 'select', _onPageLengthSelectChange);
		
		done();
	};
	
	return module;
	
});