CODEWITHSUNDEEP
javascripttabulator
beNiceWeAlLearning
beNiceWeAlLearning

Reputation: 173

Desired page in pagination with Tabulator

I am using Tabulator, I need to add input box that takes you to a desired page. If you have 10 pages and you want to go to page 9 you would just input 9 and hit enter. This feature is available in DataTables here is an example so how to do this with Tabulator? thank you

Upvotes: 2

Views: 1600

Answers (3)

Leonardo Berardinelli
Leonardo Berardinelli

Reputation: 21

Based on @nrayburn-tech and beNiceWeAlLearning posts, I made a function to add a input box into any provided Tabulator`s footer.

The diference is this works on page with multiple tabulators.

/**
 * Adds an input field to the footer of a Tabulator table to allow typing of the page number.
 * 
 * @param {Object} pTabulator - The Tabulator object to which the input field will be added.
 */
function tabulator_add_input_page(pTabulator) {
    // Create the input element with the 'change' event handler and a CSS class
    // The CSS class 'input_pag' is used to locate and update the input element in the 'pageLoaded' event
    let inputElement = $("<input>", {
        class: 'input_pag',
        style: 'width:50px;',
        title: 'Enter the Page number',
        change: function(event) {
            // If the entered value is not a number, return
            if (isNaN(event.target.value)) {
                return;
            }
            // If the entered value is greater than the maximum number of pages, set it to PageMax
            if ( event.target.value > pTabulator.getPageMax() ) {
                event.target.value = pTabulator.getPageMax();
            }                    
            // Set the Tabulator table's page to the entered number
            pTabulator.setPage(Number(event.target.value));
        }
    });

    // Add the input element to the table footer
    $(pTabulator.element).find(".tabulator-footer-contents").append($("<div>").append(inputElement));
    
    // Add the 'pageLoaded' event to put the current page number in the Input
    pTabulator.on("pageLoaded", function(pageno){
        $(this.element).find(".input_pag").val(pageno);
    }); 
}

To use it:

let myTabulator= new Tabulator(...);

myTabulator.on("tableBuilt", function(){

    //add input page
    tabulator_add_input_page(this);  

});

Hope this helps!

Upvotes: 0

beNiceWeAlLearning
beNiceWeAlLearning

Reputation: 173

Based on @nrayburn-tech answer, I modified somethings to make the input box displayed in the tabulator footer.

//CSS
         #test  {
                color:black;
                text-align: center;
                position:center;
            }
     .jumpTo{
                width:30px;
                height:10px;
            }
//JS
       $(".tabulator-footer").append("<div id='test'><input class='jumpTo' title='insert number to jump to a page'></input></div>");
                document.getElementById("test").addEventListener('change', (event) => {
                    if (isNaN(event.target.value)) {
                        return;
                    }
                    tabulator_table.setPage(Number(event.target.value));
                })

Thank you a lot

Upvotes: 2

nrayburn-tech
nrayburn-tech

Reputation: 968

http://tabulator.info/docs/4.6/page#manage

You would need to use the table.setPage(x) function where table is your Tabulator instance and x is the page number you want to go to.

So here is an example of what the event listener function would look like on one of your elements.

function pageListener(event){
  if (isNaN(event.target.value)){
    // We don't want anything that isn't a number.
    return;
  }
  // Assuming that 'table' is a variable containing the
  // Tabulator instance
  table.setPage(Number(event.target.value));
}

And here is a working example. https://jsfiddle.net/nrayburn/fewqhuar/1/

Upvotes: 2

Related Questions