0
149
VistasTabla de datos simple con un solo archivo javascript para tablas HTML
Esto es para usuarios de nivel de entrada que desean agregar una tabla de datos sin demasiadas funciones y en la forma más simple. Soy relativamente nuevo en JavaScript, por lo que esto puede parecer inmaduro para algunos. Si es así, por favor ignore esto. He probado esto con la entrada de datos usando php y otro javascript usando la solicitud xml. Funciona.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
En el archivo php/html, debe incluir el archivo js al final de la página y la tabla debe estar en la etiqueta
y la tabla debe tener la etiqueta tbody. Me gusta.. <html> <body> <div id="ah-datatable"> <table> <thead><tr><th>Col1</th><th>Col2</th></thead> <tbody><tr>....</tr>... </tbody> <script src="mycustomcode.js"></script> </body> </html>luego en el archivo js, pegue este código ...
var datatable=document.getElementById("ah-datatable"),tableData=[],searchData=[],pagination=7,currentPage=1,searchpage=1;const interval=setInterval(function(){getTD()},1e3);if(null!=datatable){let t="<div><input id='table-search' onkeyup='searchTable()' style='width: 300px' placeholder='Search'></div>",e="<div id='paginationbar'></div>";t=t+"<hr>"+datatable.innerHTML+e+"<div id='showcurrentpage'></div>",document.getElementById("ah-datatable").innerHTML=t}function getTD(){var e=[],a=document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");0<a.length&&clearInterval(interval);for(let t=0;t<a.length;t++){var n=a[t].getElementsByTagName("td"),r=[];for(let t=0;t<n.length;t++)r.push(n[t].innerHTML);e.push(r)}this.tableData=e,this.searchData=e,arrangetable()}function searchTable(){var a=document.getElementById("table-search").value;if(""==a)this.searchData=this.tableData;else{this.searchData=[];for(let e=0;e<this.tableData.length;e++)for(let t=0;t<this.tableData[e].length;t++)if(this.tableData[e][t].toLowerCase().trim().includes(a.toLowerCase().trim())){this.searchData.push(this.tableData[e]);break}}this.currentPage=1,arrangetable()}function arrangetable(){let e="";for(let t=0;t<this.pagination;t++){var a=t+(this.currentPage-1)*this.pagination;if(this.searchData[a]){e+="<tr>";for(let t=0;t<this.searchData[a].length;t++)e=e+"<td>"+this.searchData[a][t]+"</td>";e+="</tr>"}}document.getElementsByTagName("tbody")[0].innerHTML=e,arrangePGBtn()}function arrangePGBtn(){var t=Math.ceil(this.searchData.length/this.pagination);let e=this.currentPage+1;e>t&&(e=t);let a=this.currentPage-1;a<1&&(a=1);var n=(n="<button onclick='pagechange(1)'><<</button> <button onclick='pagechange("+a+")'> < </button> ")+"<button onclick='pagechange("+e+")'> > </button> <button onclick='pagechange("+t+")'>>></button>";document.getElementById("paginationbar").innerHTML=n,document.getElementById("showcurrentpage").innerText="Page "+this.currentPage+" of total "+t}function pagechange(t){this.currentPage=t,arrangetable()}entonces ya terminaste...
·
Juan Pablo Isaza
Denunciar
Responde la pregunta