onlyforbopi
9/26/2018 - 4:29 PM

HTML.CSS.JS.DynamicTablewJS.paginated table project

HTML.CSS.JS.DynamicTablewJS.paginated table project

table {
  width:100%;
  border:1px solid;
  border-collapse: collapse;
}


tr, th, td {
  border:1px solid;
  font-family:courier;
}

td {
  text-align:center;
  padding:10px;
  
}
fieldset {
  padding:10px;
  border-radius:10px;
}

label {
  display:inline-block;
  margin-bottom:10px;
}



#input:invalid {
  background-color:pink;
}

#input:valid {
  background-color:lightgreen;
}
#sub{
  visibility:hidden;
}

  var inicio=0;
  var final=15;
function submitSearch() {
  document.getElementById("sub").style.visibility="hidden";
  var found=0;
  var wordToSearch = document.getElementById("input").value;
  if(wordToSearch==""){
    
    console.log("entro en el alert");
    alert("Please type somthing to search");
      
  }
  var table = document.getElementById("myTable");
  for(var i=1;i<table.rows.length;i++){
    var objCells = table.rows.item(i).cells;
    var rowToCheck = table.rows[i].getElementsByTagName("td");
    for(var j=0;j<rowToCheck.length;j++){
      if(rowToCheck[j].innerHTML.toLowerCase()==wordToSearch.toLowerCase()){
        console.log("entro en el for j")
        rowToCheck[j].style.backgroundColor="lightgreen";
        found++;
      }
      else{
        
        rowToCheck[j].style.backgroundColor="white";
      }
    }
  }
  
  if(found!=0){
    document.getElementById("sub").innerHTML=found+" matches found";
    
  }
  else{
    document.getElementById("sub").innerHTML="no matches found";
  }
  document.getElementById("sub").style.visibility="visible";
  console.log("number of matches: "+found)
  
}
var objectData={
  cities:["Malaga","New York","Madrid","London","Paris","Fuengirola","Roma","Venecia","Honk Kong","Tokyo","Melbourne","Damasco","Bombay","Buenos Aires","San Francisco","Lima","Bogota","Manchester","Toulouse","Berlin"],
  givenNames:["Michel","Marcos","Sandra","Rafael","Ketty","Victor","Ines","Sylvie","Alvaro","Roberto","Melissa","Carla","Emma","Julia","Valeria","Irene","Sonia","Eva","Lucas","Bruno"],
  familyNames:["Aguirre","Duque","Duniol","Miñarro","Lopez","Garcia","Gomez","Fernandez","Skywalker"]
 };
function createRandomTable(){
  for(var i=0;i<500;i++){ 
    
  var randomGivenName=objectData.givenNames[Math.round((Math.random()*19))];
  var randomFamilyName=objectData.familyNames[Math.round((Math.random()*8))];
  var randomAge=Math.round((Math.random()*120));
  var randomCity=objectData.cities[Math.round((Math.random()*19))];
  var table = document.querySelector("#myTable");
  var row = table.insertRow();
  row.innerHTML = "<td>"+i+"</td><td>"+randomGivenName+"</td><td>"+randomFamilyName+"</td><td>"+randomAge+"</td><td>"+randomCity+"</td>";
  row.style.display="none";
  
  
  
  }
  }
  
function showSelectedRows(){ 
var rows = document.getElementById("myTable").rows;
for (var i = 0; i < rows.length-1; i++) {
if (i < inicio || i > final-1)
rows[i+1].style.display = 'none';
else
rows[i+1].style.display = '';
}
}
  

function previous(){
  if(inicio!=0){
    inicio-=15;
    final-=15;
    console.log(inicio);
    console.log(final);
  }
    showSelectedRows();
}
function next(){
  if(final<499){
    inicio+=15;
    final+=15;
    console.log(inicio);
    console.log(final);
  }
  showSelectedRows();
}
function init(){
  createRandomTable();
  showSelectedRows();
}

<body onload="init();">
  
  <fieldset id="field">
    <legend>SEARCH ENGINE</legend>
      <center><div>
         <label for="txt">Enter the key word: </label>
         <input id="input" type="text" name="format" id="txt" value="" required>
         <button onClick="submitSearch()" type="search" id="inputImg">Search</button>
         <sub id="sub">no matches founded</sub>
      </div>
  
</fieldset>
 
<table id="myTable">
 <caption></caption>  
  <tr>
    <th scope="col">ID</th>
    <th scope="col">Given Name</th>
    <th scope="col">Family Name</th> 
    <th scope="col">Age</th>
    <th scope="col">City</th>
  </tr>
  
</table>
  <center><button onClick="previous();">Previous page</button>
  <button onClick="next();">Next page</button>

HTML.CSS.JS.DynamicTablewJS.paginated table project

A Pen by Pan Doul on CodePen.

License.