Sobre el elemento csv viewer 
Autor: ALEJANDRO VALENTI
Besucht 337,
Followers 1,
Geteilt 0
en una pagina he insertado el csv viewer.. lee un archivo llamado listaprecio.csv correctamente formateado incluso en formato utf8. lo hace bien ahora la duda.
Cuando yo publique el sitio, si actualizo este archivo listaprecio.csv y lo subo al sitio cuando se ejecute
nuevamente el csv viewer me mostrara el listado actualizado?
Segunda cuestion: hay alguna forma de poder poner un buscador para localizar elemtos de la columna1 del listado?
Gepostet am
(It > Es)
1) ... Creo que deberías hacer algunas pruebas para asegurarte, y posiblemente probar con una actualización o, si es posible, una verificación de caché.
2) ... Inventé algo hace un tiempo para una tabla, pero ahora, para evaluarlo, necesito ver el enlace del ejemplo funcional en línea; ... si pones tu enlace aquí, volveré aquí...
.
HOLA, ciao
.
Autor
227Hi Master, thanks for replying. I've uploaded the example link I created for you. As you'll see, it's quite simple because there's only one page, which will be viewed on a mobile device. Here's the link you requested:
http://globaldima.com/kol/index.html
Autor
Friend, I just got a surprise when I posted the example: the server isn't reading the CSV file and is leaving the page blank, but it is reading it in the preview on my machine... I'm now submitting a ticket to Incomdia....
... Acabo de revisar y no veo nada, una página en blanco...
... cuando esté listo, avísame...
.
adiós, ciao
.
Hola Alejandro,
respondí en la publicación privada que abriste.
Quedo a tu disposición.
Autor
Gracias Eeric ya lo solucione publicando desde el programa.
Amigo kolAsim ya esta funcionando para que puedas verla y decirme si hay alguna forma de poder agregarle un buscador para que me localice productos.
https://globaldima.com/kol.html
saludos
ciao, ...vi que mi invento funciona en tu página con la tabla CSV-VIEWER...
... si cambias de proyecto o página, tendrás que buscar el ID de referencia y corregir la variable aquí:
const objectK = "#pluginAppObj_491_01";
ciao
-------------------------------------------
<script>
/** -- ricerca esclusiva in tabella CSV x WSx5 by KolAsim -- **/
$(document).ready(function () {/*K*/
const objectK = "#pluginAppObj_491_01";
const textK = "No results found for: ";
/**--fK--**/
const divK = ` <div style="position:absolute;top:0px;width:390px;z-index:10000000; padding:10px;"> <input type="text" id="searchInputK" placeholder="Search ... .. ." style= "width:100px;" title = "Search the table..."> <button id="searchBtnK" title="search"> 🔍 </button> <button id="resetBtnK" title="reset"> ↩ </button> <div id="searchMessageK" style="display:none; color: red; font-weight: bold; margin-top: -23px;position:absolute;left:190px;background-color:yellow"></div> </div> `; let tentativiK = 0; const maxTentativiK = 10; const intervalloK = setInterval(function () { const $tableBodyK = $(objectK + " .footable tbody"); if ($tableBodyK.length > 0 && $tableBodyK.is(":visible")) { clearInterval(intervalloK); $(objectK).prepend(divK); const $searchInputK = $("#searchInputK"); const $searchBtnK = $("#searchBtnK"); const $resetBtnK = $("#resetBtnK"); const $msgK = $("#searchMessageK"); const $rowsK = $tableBodyK.find("tr"); function resetTable() { $searchInputK.val(""); $msgK.hide(); location.reload(); } $searchBtnK.on("click", function () { const filtroK = $searchInputK.val().toLowerCase().trim(); let risultatiTrovatiK = 0; $rowsK.each(function () { const $rowK = $(this); let matchK = false; $rowK.find("td").each(function () { const cellTextK = $(this).text().toLowerCase(); if (cellTextK.includes(filtroK)) { matchK = true; return false; } }); $rowK.toggle(matchK); if (matchK) risultatiTrovatiK++; }); if (risultatiTrovatiK === 0) { const textK2 = `${textK} "${filtroK}"`; $msgK.text(textK2).fadeIn(); setTimeout(() => { $msgK.fadeOut(); resetTable(); }, 2000); } else { $msgK.hide(); } }); $resetBtnK.on("click", resetTable); } else { tentativiK++; if (tentativiK >= maxTentativiK) { clearInterval(intervalloK); setTimeout(() => { }, 1000); } } }, 1000);/**K**/ });
</script>
.
.
Autor
Si Genio, funciona perfecto!
MIL MIL GRACIAS
saludos
.. OK ... grazie ... ciao ...
.
Autor
Amigo se me presenta un problema, he colocado el buscador en un objeto html arriba del objeto del listado, y ademas agregue un separador de 30px para que este separado pero haga lo que haga me lo muestra sobre el listado pisandomelo... como puedo arreglar esto para que este separado el buscador de la lista?
te paso una captura para que veas como me lo pisa.
...desafortunadamente, como tu ejemplo está ubicado en la parte superior de la página, no se puede evaluar más...
...quizás deberías dejar un margen en la página...
...si es necesario, puedes corregir la coordenada superior aquí:
const divK = ` <div style="position:absolute;top:0px; etc. etc.... ... (es.:top:-20px;)...
... ...No lo había pensado antes, pero ahora he buscado en Marketplace y, aplicando el mismo código que el tuyo/el mío en la simulación, sin cambiar nada, he obtenido esto correctamente:
.
ciao
.
Hola hay esta funcion para insertar un buscador para el objeto CSV Viewer
Podeis probarlo en https://cronotec.es/horasaida.html
Instrucciones:
Insertar en la página el objeto HTML y escribir
<input type="text" id="buscadorTabla" placeholder="Buscar en la tabla..." style="width:100%; padding:8px; margin-bottom:10px;">
En "propiedades" de la página "Avanzado" "Antes del cierre BODY" pegamos
<script>
document.addEventListener("DOMContentLoaded", function () {
const input = document.getElementById("buscadorTabla");
input.addEventListener("keyup", function () {
const filtro = input.value.toLowerCase();
const tablas = document.querySelectorAll("table");
tablas.forEach(tabla => {
const filas = tabla.querySelectorAll("tbody tr");
filas.forEach(fila => {
const textoFila = fila.innerText.toLowerCase();
fila.style.display = textoFila.includes(filtro) ? "" : "none";
});
});
});
});
</script>
Autor
Muchas gracias, te consulto por si sabes hay alguna forma de que la primera fila del listado donde estan la cabecera y etiquetas de las columnas quede fija sin que desaparezca con el scroll?
Saludos
... ...cosas viejas
:
https://helpcenter.websitex5.com/de/post/269186
.
ciao
.
Autor
hola Maestro!
ahi encontre el codigo que en su momento le pasaste al solicitante.
Por lo que lei y entiendo este codigo congela las dos primeras filas, en mi caso solo quiero congelar la primer fila para que queden las etiquetas fijas de las columnas asi que creo que el codigo seria asi:
<script>
$( documento ).ready(función() {//K>;
/** -- tabla de bloques tr x WSx5 por KolAsim --**/
styleK= '<style>table {ancho:100% !importante} '+
'tr:nth-child(1), tr:nth-child(1) td {'+
'posición:pegajosa;arriba: 0px;índice z: 1;/*K*/}'+
'tr:nth-child(2),tr:nth-child(2) td{'+
'posición:pegajosa;arriba: 45px;índice z: 1;}'+
'#imCell_9 .texto-interior,#imCell_7 .texto-interior'+
'{altura:500px!importante;desbordamiento-y:desplazamiento!importante;}'+
'#imCell_9 div, #imCell_7 div{overflow:hidden !important}'+
'</style>';
$("head").append(styleK)
divK = '<div class="divK" style="position:absolute;background-color:silver;'+
'width:100%;height:100px;z-index:0;border-bottom:solid 4px black"></div>';
$(".text-inner table").parent().prepend(divK)
k=$("table").width();
resizeTableK()
});//K<<;
//--------------------------
$(window).resize(function() {//K1>;
resizeTableK()
});//K1<<;
</script>
Si esto es correcto donde debo pegar este codigo?
Gracias mil
... si es la única tabla en la página, como en tu ejemplo CSV en línea, entonces es aún más simple:
<style> thead th { position: sticky; top: 0; } </style>
.
ciao
.
Autor
Una vez mas GRACIAS MAESTRO!
Solo tengo un pequeño problema no se donde va este ultimo codigo en que lugar debo insertarlo....
>> Paso 3 - Mapa > Ventana 'Propiedades de la página' > Las opciones de la sección Avanzado >
▪ Código personalizado: > Antes del cierre de la etiqueta HEAD.
ciao
.
Autor
Gracias ahora si!
Maestro quiero mostrarte algo muy interesante...con relacion a este tema un amigo mio se sento en la maquina y con chatgpt genero un html con la tabla igual que incomedia pero lo curioso es el buscador por favor pegale una mirada...
https://globaldima.com/todo10app
lo interesante es la forma de buscar no se necesita ningun boton tu escribes y ya busca....
que genial seria poder implementar este tipo de buscador en una pagina de incomedia....
ciao, ... L'IA è l'incubo dell'interfaccia utente, ma se la preferisci e va bene per te, puoi usarla. Preferisco sempre il mio codice con i pulsanti...
... Comunque, questo codice è la mia versione dinamica simile con thead corretto, basata su questo CSV dell'esempio online sopra:
>> https://globaldima.com/kol.html
-----------------------------------
<script>
/* -- ricerca in tabella CSV-VIEWER x WSx5 di KolAsim -- */
$(document).ready(function () { /*K>*/
var objectCSVtableK = "#table-pluginAppObj_491_01";
/*---K---*/
setTimeout (function(){ var theadK = '<style> thead th { position: sticky; top: 0; } </style>'; $("head").append(theadK); var inputK = '<input type="text" id="ricercaK" placeholder="Cerca nella tabella CSV" style="width:230px; dimensione font:24px; ribottitura:0px">'; var resetK = '<img id = "resetK" src = "https://www.iconpacks.net/icons/4/free-icon-reset-14435.png" larghezza = "50" stile = "cursor:pointer">'; $(objectCSVtableK).parent().parent().prepend(inputK+resetK); $("#resetK").click(function(){ $(objectCSVtableK+ " *").show(); $("#ricercaK").val(""); }); $("#ricercaK").on("keyup", function () { var chiaveK = $(this).val().toLowerCase(); $(objectCSVtableK).each(function () { $(this).find("tbody tr").each(function () { var testoRigaK = $(this).text().toLowerCases (); $(this).toggle(testoRigaK.indexOf(chiaveK) !== -1); }); }); }); },3000); /**K<<**/});
</copione>
.
ciao
.