​

DataTable.feature.register('inputPaging', function (settings, opts) {

    let api = new DataTable.Api(settings);

    let options = Object.assign({

        firstLast: true,

        previousNext: true,

        pageOf: true

    }, opts);

​

    // Create the DOM elements for the paging control

    let wrapper = createElement('div');

    let first = createElement(

        'button', 'dt-paging',

        api.i18n('oPaginate.sFirst', '\u00AB'),

        () => api.page('first').draw(false)

    );

    let previous = createElement(

        'button', 'dt-paging',

        api.i18n('oPaginate.sPrevious', '\u2039'),

        () => api.page('previous').draw(false)

    );

    let next = createElement(

        'button', 'dt-paging',

        api.i18n('oPaginate.sNext', '\u203A'),

        () => api.page('next').draw(false)

    );

    let last = createElement(

        'button', 'dt-paging',

        api.i18n('oPaginate.sLast', '\u00BB'),

        () => api.page('last').draw(false)

    );

    let box = createElement('div', 'dt-paging-input');

    let input = createElement('input');

    let of = createElement('span');

​

    input.setAttribute('inputmode', 'numeric');

    input.setAttribute('pattern', '[0-9]*');

​

    // Assemble the DOM structure

    if (options.firstLast) {

        wrapper.appendChild(first);

    }

​

    if (options.previousNext) {

        wrapper.appendChild(previous);

    }

​

    wrapper.appendChild(box);

​

    if (options.previousNext) {

        wrapper.appendChild(next);

    }

​

    if (options.firstLast) {

        wrapper.appendChild(last);

    }

​

    box.appendChild(input);

​

    if (options.pageOf) {

        box.appendChild(of);

    }

​

    // Block characters other than numbers

    input.addEventListener('keypress', function (e) {

        if (e.charCode < 48 || e.charCode > 57) {

            e.preventDefault();

        }

    });

​

    // On new value, redraw the table

    input.addEventListener('input', function () {

        if (input.value) {

            api.page(input.value - 1).draw(false);

        }

​

        // Auto adjust the width so the content is visible

        input.style.width = (input.value.length + 2) + 'ch';

    });

​

    api.on('draw', () => {

        let info = api.page.info();

​

        // Update the classes for the "jump" buttons to show what is available

        first.classList.toggle('disabled', info.page === 0);

        previous.classList.toggle('disabled', info.page === 0);

        next.classList.toggle('disabled', info.page === info.pages-1);

        last.classList.toggle('disabled', info.page === info.pages-1);

​

        // Set the new page value into the input box

        if (input.value !== info.page + 1) {

            input.value = info.page + 1;

        }

​

        // Show how many pages there are

        of.textContent = ' / ' + info.pages;

    });

​

    return wrapper;

});

​

/**

 * Create a new element

 *

 * @param tag Tag name

 * @param className Class to assign

 * @param text Text to show in the element

 * @param fn Click event handler

 * @returns Element

 */

function createElement(tag, className, text, fn) {

    var el = document.createElement(tag);

​

    if (className) {

        el.className = className;

    }

​

    if (text) {

        el.textContent = text;

    }

​

    if (fn) {

        el.addEventListener('click', fn);

    }

​

    return el;

}

​