Tabla Acorde\u00f3n con B\u00fasqueda y Paginaci\u00f3n<\/title>\n <style>\n \/* Estilos para la tabla *\/\n table {\n width: 100%;\n border-collapse: collapse;\n }\n th, td {\n border: 1px solid #ccc;\n padding: 8px;\n text-align: left;\n }\n \/* Estilos para la fila desplegable *\/\n .accordion-row {\n background-color: #f2f2f2;\n }\n .hidden-row {\n display: none;\n }\n \/* Estilos para la paginaci\u00f3n *\/\n .pagination {\n display: flex;\n list-style: none;\n margin: 20px 0;\n padding: 0;\n }\n .page-item {\n margin-right: 10px;\n }\n .page-link {\n text-decoration: none;\n padding: 5px 10px;\n border: 1px solid #ccc;\n background-color: #fff;\n color: #333;\n }\n :root {\n --bg-page: #1a1a1a;\n --text-color: #f3f3f3;\n --card-bg: #202020;\n --icon-bg: #45423C;\n --blue: #0870f8;\n --blue-rgb: 8, 112, 248;\n --orange: #FF9232;\n --g-purple: linear-gradient(30deg, #85f, #9966ff);\n --g-yellow: linear-gradient(30deg, #fc0, #fc0);\n --g-red: linear-gradient(30deg, #f36, #f24);\n --g-blue: linear-gradient(30deg, #0cf, #0af);\n --g-purple: linear-gradient(30deg, #85f, #9966ff);\n --range: 0%;\n --shadow: rgba(0, 6, 39, .1);\n --light-shadow: rgba(255, 255, 255, .8);\n --light-shadow-2: rgba(255, 255, 255, .1);\n }\n * {\n box-sizing: border-box;\n font-family: \"Inter var\", sans-serif;\n font-size: 16px;\n font-weight: 400;\n user-select: none;\n transition: all 200ms ease;\n &:focus {\n outline: none;\n }\n }\n .hide {\n display: none;\n visibility: hidden;\n height: 0;\n }\n .pagination\\:container {\n display: flex;\n align-items: center;\n }\n .arrow\\:text {\n display: block;\n vertical-align: middle;\n font-size: 13px;\n vertical-align: middle;\n }\n .pagination\\:number {\n --size: 32px;\n --margin: 6px;\n margin: 0 var(--margin);\n border-radius: 6px;\n background: #202020;\n max-width: auto;\n min-width: var(--size);\n height: var(--size);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding: 0 6px;\n @media (hover: hover) {\n &:hover {\n background: lighten(#202020, 3%);\n }\n }\n &:active {\n background: lighten(#202020, 3%);\n }\n }\n .pagination\\:active {\n background: lighten(#202020, 3%);\n position: relative;\n }\n .encabezado {\n background-color: #4a8d9e;\n color: #fff;\n font-family: \"Inter var\", sans-serif;\n font-size: 16px;\n font-weight: 600;\n width: 33%;\n }\n .titulo_libro {\n font-weight: 500;\n }\n <\/style>\n<\/head>\n<body>\n <div>\n <input type=\"text\" id=\"searchInput\" placeholder=\"Buscar...\">\n <\/div>\n <table>\n <thead>\n <tr>\n <th class=\"encabezado\">T\u00edtulo<\/th>\n <th class=\"encabezado\">Subt\u00edtulo<\/th>\n <th class=\"encabezado\">Autores<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"tableBody\">\n \n <\/tbody>\n <\/table>\n <ul class=\"pagination\" id=\"pagination\"><\/ul>\n <script>\n const searchInput = document.getElementById('searchInput');\n const tableBody = document.getElementById('tableBody');\n const pagination = document.getElementById('pagination');\n const itemsPerPage = 30; \/\/ Cambiar la cantidad de registros por p\u00e1gina\n let currentPage = 1;\n let filteredData = [];\n let originalData = []; \n fetch('https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/wp-content\/uploads\/2023\/08\/libros_biblioteca.txt')\n .then(response => response.json())\n .then(data => {\n originalData = data; \n filteredData = data; \n updateTable();\n searchInput.addEventListener('input', () => {\n filterData();\n updateTable();\n });\n });\n function normalizeText(text) {\n return text\n .normalize(\"NFD\")\n .replace(\/[\\u0300-\\u036f]\/g, \"\")\n .toLowerCase();\n }\n function filterData() {\n const searchTerm = normalizeText(searchInput.value.trim());\n if (searchTerm === \"\") {\n filteredData = originalData.slice(); \n } else {\n filteredData = originalData.filter(item => {\n const normalizedTitle = normalizeText(item.title);\n const normalizedSubtitle = normalizeText(item.subtitle);\n const normalizedAuthors = item.authors.map(author =>\n normalizeText(author)\n );\n const normalizedTopics = item.topics.map(topic =>\n normalizeText(topic)\n );\n const normalizedSubjects = item.subjects\n .filter(subject => subject !== \"\")\n .map(subject => normalizeText(subject));\n const normalizedEditorial = normalizeText(item.editorial);\n const normalizedPublicationDate = normalizeText(item.publication_date);\n return (\n normalizedTitle.includes(searchTerm) ||\n normalizedSubtitle.includes(searchTerm) ||\n normalizedAuthors.some(author => author.includes(searchTerm)) ||\n normalizedTopics.some(topic => topic.includes(searchTerm)) ||\n normalizedSubjects.some(subject => subject.includes(searchTerm)) ||\n normalizedEditorial.includes(searchTerm) ||\n normalizedPublicationDate.includes(searchTerm)\n );\n });\n }\n currentPage = 1;\n }\n function updateTable() {\n const startIndex = (currentPage - 1) * itemsPerPage;\n const endIndex = startIndex + itemsPerPage;\n const visibleData = filteredData.slice(startIndex, endIndex);\n tableBody.innerHTML = '';\n visibleData.forEach(item => {\n const row = document.createElement('tr');\n row.innerHTML = `\n <td><span class='titulo_libro'>${item.title}<\/span><\/td>\n <td>${item.subtitle}<\/td>\n <td>${item.authors.join(', ')}<\/td>\n `;\n tableBody.appendChild(row);\n const hiddenRow = document.createElement('tr');\n hiddenRow.classList.add('hidden-row');\n hiddenRow.innerHTML = `\n <td colspan=\"3\">\n <p><strong>Tema:<\/strong> ${item.topics.join(', ')}<\/p>\n <p><strong>Materia:<\/strong> ${item.subjects.filter(subject => subject !== '').join(', ')}<\/p>\n <p><strong>Editorial:<\/strong> ${item.editorial}<\/p>\n <p><strong>Fecha de Publicaci\u00f3n:<\/strong> ${item.publication_date}<\/p>\n <\/td>\n `;\n tableBody.appendChild(hiddenRow);\n row.addEventListener('click', () => {\n row.classList.toggle('accordion-row');\n hiddenRow.classList.toggle('hidden-row');\n });\n });\n updatePagination();\n }\n function updatePagination() {\n const totalPages = Math.ceil(filteredData.length \/ itemsPerPage);\n const maxVisiblePages = 10;\n pagination.innerHTML = '';\n let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages \/ 2));\n let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);\n if (endPage - startPage + 1 < maxVisiblePages) {\n startPage = Math.max(1, endPage - maxVisiblePages + 1);\n }\n \/\/ Crear el bot\u00f3n de la primera p\u00e1gina\n if (startPage > 1) {\n createPageItem(1, '1');\n if (startPage > 2) {\n createPageItem(null, '...');\n }\n }\n \/\/ Crear los botones de las p\u00e1ginas intermedias\n for (let i = startPage; i <= endPage; i++) {\n createPageItem(i, i.toString(), i === currentPage);\n }\n \/\/ Crear el bot\u00f3n de la \u00faltima p\u00e1gina\n if (endPage < totalPages) {\n if (endPage < totalPages - 1) {\n createPageItem(null, '...');\n }\n createPageItem(totalPages, totalPages.toString());\n }\n }\n function createPageItem(pageNumber, content, isActive = false) {\n const pageItem = document.createElement('li');\n pageItem.classList.add('page-item');\n if (isActive) {\n pageItem.classList.add('active');\n }\n const pageLink = document.createElement('a');\n pageLink.classList.add('page-link');\n pageLink.href = '#';\n pageLink.textContent = content;\n pageItem.appendChild(pageLink);\n if (pageNumber !== null) {\n pageLink.addEventListener('click', () => {\n currentPage = pageNumber;\n updateTable();\n });\n }\n pagination.appendChild(pageItem);\n }\n \n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Tabla Acorde\u00f3n con B\u00fasqueda y Paginaci\u00f3n T\u00edtulo Subt\u00edtulo Autores<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages\/4815"}],"collection":[{"href":"https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/comments?post=4815"}],"version-history":[{"count":14,"href":"https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages\/4815\/revisions"}],"predecessor-version":[{"id":4831,"href":"https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages\/4815\/revisions\/4831"}],"wp:attachment":[{"href":"https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/media?parent=4815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4815,"date":"2023-08-09T17:41:17","date_gmt":"2023-08-09T20:41:17","guid":{"rendered":"https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/?page_id=4815"},"modified":"2023-08-09T17:41:18","modified_gmt":"2023-08-09T20:41:18","slug":"catalogo-de-libros","status":"publish","type":"page","link":"https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/catalogo-de-libros\/","title":{"rendered":"Cat\u00e1logo de Libros"},"content":{"rendered":"\n\n\n\n \n \n Tabla Acorde\u00f3n con B\u00fasqueda y Paginaci\u00f3n<\/title>\n <style>\n \/* Estilos para la tabla *\/\n table {\n width: 100%;\n border-collapse: collapse;\n }\n th, td {\n border: 1px solid #ccc;\n padding: 8px;\n text-align: left;\n }\n \/* Estilos para la fila desplegable *\/\n .accordion-row {\n background-color: #f2f2f2;\n }\n .hidden-row {\n display: none;\n }\n \/* Estilos para la paginaci\u00f3n *\/\n .pagination {\n display: flex;\n list-style: none;\n margin: 20px 0;\n padding: 0;\n }\n .page-item {\n margin-right: 10px;\n }\n .page-link {\n text-decoration: none;\n padding: 5px 10px;\n border: 1px solid #ccc;\n background-color: #fff;\n color: #333;\n }\n :root {\n --bg-page: #1a1a1a;\n --text-color: #f3f3f3;\n --card-bg: #202020;\n --icon-bg: #45423C;\n --blue: #0870f8;\n --blue-rgb: 8, 112, 248;\n --orange: #FF9232;\n --g-purple: linear-gradient(30deg, #85f, #9966ff);\n --g-yellow: linear-gradient(30deg, #fc0, #fc0);\n --g-red: linear-gradient(30deg, #f36, #f24);\n --g-blue: linear-gradient(30deg, #0cf, #0af);\n --g-purple: linear-gradient(30deg, #85f, #9966ff);\n --range: 0%;\n --shadow: rgba(0, 6, 39, .1);\n --light-shadow: rgba(255, 255, 255, .8);\n --light-shadow-2: rgba(255, 255, 255, .1);\n }\n * {\n box-sizing: border-box;\n font-family: \"Inter var\", sans-serif;\n font-size: 16px;\n font-weight: 400;\n user-select: none;\n transition: all 200ms ease;\n &:focus {\n outline: none;\n }\n }\n .hide {\n display: none;\n visibility: hidden;\n height: 0;\n }\n .pagination\\:container {\n display: flex;\n align-items: center;\n }\n .arrow\\:text {\n display: block;\n vertical-align: middle;\n font-size: 13px;\n vertical-align: middle;\n }\n .pagination\\:number {\n --size: 32px;\n --margin: 6px;\n margin: 0 var(--margin);\n border-radius: 6px;\n background: #202020;\n max-width: auto;\n min-width: var(--size);\n height: var(--size);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding: 0 6px;\n @media (hover: hover) {\n &:hover {\n background: lighten(#202020, 3%);\n }\n }\n &:active {\n background: lighten(#202020, 3%);\n }\n }\n .pagination\\:active {\n background: lighten(#202020, 3%);\n position: relative;\n }\n .encabezado {\n background-color: #4a8d9e;\n color: #fff;\n font-family: \"Inter var\", sans-serif;\n font-size: 16px;\n font-weight: 600;\n width: 33%;\n }\n .titulo_libro {\n font-weight: 500;\n }\n <\/style>\n<\/head>\n<body>\n <div>\n <input type=\"text\" id=\"searchInput\" placeholder=\"Buscar...\">\n <\/div>\n <table>\n <thead>\n <tr>\n <th class=\"encabezado\">T\u00edtulo<\/th>\n <th class=\"encabezado\">Subt\u00edtulo<\/th>\n <th class=\"encabezado\">Autores<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"tableBody\">\n \n <\/tbody>\n <\/table>\n <ul class=\"pagination\" id=\"pagination\"><\/ul>\n <script>\n const searchInput = document.getElementById('searchInput');\n const tableBody = document.getElementById('tableBody');\n const pagination = document.getElementById('pagination');\n const itemsPerPage = 30; \/\/ Cambiar la cantidad de registros por p\u00e1gina\n let currentPage = 1;\n let filteredData = [];\n let originalData = []; \n fetch('https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/wp-content\/uploads\/2023\/08\/libros_biblioteca.txt')\n .then(response => response.json())\n .then(data => {\n originalData = data; \n filteredData = data; \n updateTable();\n searchInput.addEventListener('input', () => {\n filterData();\n updateTable();\n });\n });\n function normalizeText(text) {\n return text\n .normalize(\"NFD\")\n .replace(\/[\\u0300-\\u036f]\/g, \"\")\n .toLowerCase();\n }\n function filterData() {\n const searchTerm = normalizeText(searchInput.value.trim());\n if (searchTerm === \"\") {\n filteredData = originalData.slice(); \n } else {\n filteredData = originalData.filter(item => {\n const normalizedTitle = normalizeText(item.title);\n const normalizedSubtitle = normalizeText(item.subtitle);\n const normalizedAuthors = item.authors.map(author =>\n normalizeText(author)\n );\n const normalizedTopics = item.topics.map(topic =>\n normalizeText(topic)\n );\n const normalizedSubjects = item.subjects\n .filter(subject => subject !== \"\")\n .map(subject => normalizeText(subject));\n const normalizedEditorial = normalizeText(item.editorial);\n const normalizedPublicationDate = normalizeText(item.publication_date);\n return (\n normalizedTitle.includes(searchTerm) ||\n normalizedSubtitle.includes(searchTerm) ||\n normalizedAuthors.some(author => author.includes(searchTerm)) ||\n normalizedTopics.some(topic => topic.includes(searchTerm)) ||\n normalizedSubjects.some(subject => subject.includes(searchTerm)) ||\n normalizedEditorial.includes(searchTerm) ||\n normalizedPublicationDate.includes(searchTerm)\n );\n });\n }\n currentPage = 1;\n }\n function updateTable() {\n const startIndex = (currentPage - 1) * itemsPerPage;\n const endIndex = startIndex + itemsPerPage;\n const visibleData = filteredData.slice(startIndex, endIndex);\n tableBody.innerHTML = '';\n visibleData.forEach(item => {\n const row = document.createElement('tr');\n row.innerHTML = `\n <td><span class='titulo_libro'>${item.title}<\/span><\/td>\n <td>${item.subtitle}<\/td>\n <td>${item.authors.join(', ')}<\/td>\n `;\n tableBody.appendChild(row);\n const hiddenRow = document.createElement('tr');\n hiddenRow.classList.add('hidden-row');\n hiddenRow.innerHTML = `\n <td colspan=\"3\">\n <p><strong>Tema:<\/strong> ${item.topics.join(', ')}<\/p>\n <p><strong>Materia:<\/strong> ${item.subjects.filter(subject => subject !== '').join(', ')}<\/p>\n <p><strong>Editorial:<\/strong> ${item.editorial}<\/p>\n <p><strong>Fecha de Publicaci\u00f3n:<\/strong> ${item.publication_date}<\/p>\n <\/td>\n `;\n tableBody.appendChild(hiddenRow);\n row.addEventListener('click', () => {\n row.classList.toggle('accordion-row');\n hiddenRow.classList.toggle('hidden-row');\n });\n });\n updatePagination();\n }\n function updatePagination() {\n const totalPages = Math.ceil(filteredData.length \/ itemsPerPage);\n const maxVisiblePages = 10;\n pagination.innerHTML = '';\n let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages \/ 2));\n let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);\n if (endPage - startPage + 1 < maxVisiblePages) {\n startPage = Math.max(1, endPage - maxVisiblePages + 1);\n }\n \/\/ Crear el bot\u00f3n de la primera p\u00e1gina\n if (startPage > 1) {\n createPageItem(1, '1');\n if (startPage > 2) {\n createPageItem(null, '...');\n }\n }\n \/\/ Crear los botones de las p\u00e1ginas intermedias\n for (let i = startPage; i <= endPage; i++) {\n createPageItem(i, i.toString(), i === currentPage);\n }\n \/\/ Crear el bot\u00f3n de la \u00faltima p\u00e1gina\n if (endPage < totalPages) {\n if (endPage < totalPages - 1) {\n createPageItem(null, '...');\n }\n createPageItem(totalPages, totalPages.toString());\n }\n }\n function createPageItem(pageNumber, content, isActive = false) {\n const pageItem = document.createElement('li');\n pageItem.classList.add('page-item');\n if (isActive) {\n pageItem.classList.add('active');\n }\n const pageLink = document.createElement('a');\n pageLink.classList.add('page-link');\n pageLink.href = '#';\n pageLink.textContent = content;\n pageItem.appendChild(pageLink);\n if (pageNumber !== null) {\n pageLink.addEventListener('click', () => {\n currentPage = pageNumber;\n updateTable();\n });\n }\n pagination.appendChild(pageItem);\n }\n \n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Tabla Acorde\u00f3n con B\u00fasqueda y Paginaci\u00f3n T\u00edtulo Subt\u00edtulo Autores<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages\/4815"}],"collection":[{"href":"https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/comments?post=4815"}],"version-history":[{"count":14,"href":"https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages\/4815\/revisions"}],"predecessor-version":[{"id":4831,"href":"https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/pages\/4815\/revisions\/4831"}],"wp:attachment":[{"href":"https:\/\/uanormal1-bue.infd.edu.ar\/sitio\/wp-json\/wp\/v2\/media?parent=4815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}