This jQuery code snippet enhances the pagination of Ninja Tables by adding a numeric input field where users can input the page number they want to navigate to directly. The input field ensures smoother navigation through large datasets, allowing users to jump to specific pages effortlessly.

Enhanced Pagination with Goto Input Field for Ninja Tables.js

jQuery(document).ready(function() {
    // Function to add goto page functionality
    function addGotoPageFunctionality() {
        // Check if the goto input field already exists
        if ($('#gotoPage').length === 0) {
            // Create the goto input field and button
            var gotoInput = $('<input>', { type: 'number', id: 'gotoPage', placeholder: 'Go to page', class: 'form-control', min: "1" , max: $('.footable-page').length,style: 'width:100px;padding:17px 0!important;text-align:center;' });
            var gotoButton = $('<button>', { id: 'gotoButton', class: 'btn btn-default', text: 'Go' });
            var gotoElement = $('<li>', { class: 'nt_goto_pager', 'aria-label': 'goto page', style: 'display:inline-flex!important;align-items:center;' }).append(gotoInput, gotoButton);

            // Append the goto element to the pagination list
            $('.pagination').append(gotoElement);

            // Function to handle goto button click
            $(document).on('click', '#gotoButton', function() {
                var pageNumber = $('#gotoPage').val(); // Get the page number entered by the user
                var totalPages = $('.footable-page').length; // Get the total number of pages

                // Validate the entered page number
                if (!isNaN(pageNumber) && pageNumber > 0 && pageNumber <= totalPages) {
                    $('.footable-page').eq(parseInt(pageNumber) - 1).find('a').trigger('click'); // Trigger click event to navigate to the target page
                } else {
                    alert('Please enter a valid page number.');
                }
            });
        }
    }

    // Call the function to add goto page functionality initially
    addGotoPageFunctionality();

    // Function to handle event after filtering
    $table.on('after.ft.filtering', function() {
        // Reapply goto page functionality after filtering
        addGotoPageFunctionality();
    });

    // Function to handle event after paging
    $table.on('after.ft.paging', function() {
        // Reapply goto page functionality after paging
        addGotoPageFunctionality();
    });
});