Preview:
$(document).ready(function() {
    var itemsPerPage = 10; // Número de itens por página
    var items = $("tbody tr");
    var pagination = $(".pagination");
    // Função para atualizar a exibição dos itens com base na página atual
    function updateDisplay(pageNum, filteredItems) {
        var start = (pageNum - 1) * itemsPerPage;
        var end = start + itemsPerPage;
        filteredItems.hide().slice(start, end).show();
    }
    // Função para atualizar a paginação
    function updatePagination(numPages, currentPage) {
        pagination.empty();
        for (var i = 1; i <= numPages; i++) {
            var pageLink = $("<a href='#' class='page-link'>" + i + "</a>");
            if (i === currentPage) {
                pageLink.addClass("current-page");
            }
            pagination.append(pageLink);
        }
    }
    // Função para aplicar a paginação
    function applyPagination(searchTerm, currentPage) {
        var filteredItems = items;
        if (searchTerm !== "") {
            filteredItems = items.filter(function() {
                return $(this).text().toLowerCase().indexOf(searchTerm) > -1;
            });
        }
        var numItems = filteredItems.length;
        var numPages = Math.ceil(numItems / itemsPerPage);
        
        // Atualizar a paginação
        updatePagination(numPages, currentPage);
        // Exibir a página atual dos itens filtrados
        updateDisplay(currentPage, filteredItems);
    }
    // Adicionar evento de input para o campo de pesquisa
    $("#search").on("keyup", function() {
        var searchTerm = $(this).val().toLowerCase();
        applyPagination(searchTerm, 1); // Ao pesquisar, volte para a primeira página
    });
    // Executar a paginação ao carregar a página
    applyPagination("", 1); // Iniciar na primeira página
    
    // Adicionar evento de clique para trocar de página
    pagination.on("click", "a.page-link", function(e) {
        e.preventDefault();
        var pageNum = $(this).text();
        var searchTerm = $("#search").val().toLowerCase();
        
        applyPagination(searchTerm, parseInt(pageNum)); // Atualizar a página atual
    });
});
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter