Skip to main content

Import server-side data

You can use the server property to load data from a remote server and populate the table:

Live Editor
const paginator = new Paginator({
    columns: ['Name', 'Language', 'Released At', 'Artist'],
    server: {
        url: 'https://api.scryfall.com/cards/search?q=Inspiring',
        param: {
            method: 'GET',
        },
        processData: (data) =>
            data.data.map((card) => [
                card.name,
                card.lang,
                card.released_at,
                card.artist,
            ]),
    },
    dataRender: (response) => {
        let dataHtml = '<ul>';
        response.forEach((item, index) => {
            dataHtml += '<li><span>' + item.join(' : ') + '</span></li>';
        });
        dataHtml += '</ul>';
        document.querySelectorAll('div.list-container')[0].innerHTML = dataHtml;
    }
});
Result
Loading...
note

You can also use the data attribute, pass an async function and your favorite Ajax/XHR client to send the request and feed the table, see Async data import.