0
142
ViewsSimple datatable with single javascript file for HTML tables
This is for entry level users who want to add datatabe without too many functions and in simplest form. I am relatively new to javascript so this may seems as immature for some. If so, please ignore this. I have tested this with data input using php and another javascript using xml request. It works.
·
Juan Pablo Isaza
1 answers
Answer question0
In php/html file, you need to include js file at the end of the page and table need to be in tag
and table need to have tbody tag in it. Like..<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>
then in js file, paste this code...
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()}
then you are done...
·
Juan Pablo Isaza
Report
Answer question