$(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 }); });
Preview:
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