0
165
Views¿Quiero mostrar el total de filas al lado de la búsqueda y hacer que el código de búsqueda funcione en python?
Creé una tabla y quiero hacer una búsqueda de dos columnas (código y nombre) para que cuando el usuario ingrese cualquier letra o número de nombre, las columnas de código muestren todos los nombres de fila que contienen esa letra y quiero mostrar el total de filas de mi mesa al lado del cuadro de búsqueda.
en HTML
<input type="text" class="form-control" onkeyup="searchrecords" id="searchtext" placeholder="Search" aria-label="Text input with dropdown button"> <h6 class="mt-3 mx-4">Total: </h6> </div> </div> <table class="table table-striped " id="table1"> <thead> <tr class="feed-bg text-white "> <th>ID</th> <th>Employee Code</th> <th>Employee Name</th> <th>Email</th> </tr> </thead> <tbody> {% for i in data_list %} <tr> <td>{{ forloop.counter }}</td> <td>{{i.employee_code}}</td> <td>{{i.employee_name}}</td> <td>{{i.email}}</td> </tr> {% endfor %} </tbody> </table>En JS hice el código de búsqueda pero no funciona!
function searchrecords() { var input,table,tr,td,filter; input=document.getElementById("searchtext"); filter=input.value.toUpperCase(); table=document.getElementById("table1"); tr=table.getElementsByTagName("tr"); for(i=0;i<tr.length;i++) { td=tr[i].getElementsByTagName("td")[0]; if(td) { textdata=td.innerText; if(textdata.toUpperCase().indexOf(filter)>-1) { tr[i].style.display=""; } else { tr[i].style.display="none"; } } } } 
2 answers
Answer question0
Parece que su código recorre todas las filas, luego para cada fila verifica la primera celda de la fila (td[0]) contra el campo de entrada. Parece que la primera celda de la fila contiene un contador, por lo que presumiblemente no coincidirá con el texto de entrada.
Intente pegar algunas declaraciones de console.log en su ciclo para verificar qué está sucediendo (o paso a paso en un depurador)
Sería más fácil si compartiera todo el HTML generado relevante (incluida la entrada de 'texto de búsqueda'). Suponiendo que esté satisfecho con el HTML que se ha generado, entonces el HTML final será más útil que el marcado de django.
Probablemente debería eliminar las etiquetas python y django de su pregunta, ya que parece que su problema es puramente con HTML/JS
0
Hice un ejemplo para ti aquí. Tal vez ayude.
const input = document.getElementById("searchtext"); const rowNum = document.getElementById("row-num"); const table = document.getElementById("table1"); const tr = Array.from(table.getElementsByTagName("tr")); function renderRowNr() { rowNum.innerHTML = tr.filter((row) => row.style.display !== "none").length; } function resetRows() { tr.forEach((row) => (row.style.display = "inherit")); } function searchrecords() { resetRows(); input.value && tr .filter((row) => { return !Array.from(row.children) .map((cell) => { return cell.textContent .toUpperCase() .includes(input.value.toUpperCase()); }) .some((cell) => cell === true); }) .forEach((row) => (row.style.display = "none")); renderRowNr(); } function init() { resetRows(); renderRowNr(); input.addEventListener("change", () => searchrecords()); } init(); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <label>Filter: </label> <input id="searchtext" /> <p>row number: <span id="row-num"></span></p> <table class="table table-striped" id="table1"> <tbody> <tr> <td>1</td> <td>abc</td> <td>Lokrum</td> <td>email1</td> </tr> <tr> <td>2</td> <td>def</td> <td>Lara</td> <td>email2</td> </tr> <tr> <td>3</td> <td>ghi</td> <td>Lora</td> <td>email3</td> </tr> </tbody> </table> <script src="app.js"></script> </body> </html>