FORK Table control Search

Fork to work on Search

by Chance Nursey-Bush

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-striped" id="myTable">
  <thead>
    <tr name="noexport">
      <th colspan=3 style="text-align:center">
        <span>Database Name</span>
        <span style="float:right"><button class="btn btn-default btn-xs" id="btnFoldTable" data-toggle="collapse" data-target=".collapse">-</button></span>
      </th>
    </tr>
    <tr class="collapse in" name="noexport">
      <th colspan=3>
        <span>
        <input class="btn btn-default btn-xs" type="button" value="Export" style="float:left" id="export">
        <input type="text" placeholder="Search" id="inputSearch" style="float:right">
        </span>
      </th>
    </tr>
    <tr class="collapse in">
      <th>Col1&nbsp;<span><button class="btn btn-default btn-xs" type="button" value="+"><span class="glyphicon glyphicon-triangle-bottom"></span></button>
        </span>
      </th>
      <th>Col2&nbsp;<span><button class="btn btn-default btn-xs" type="button" value="+"><span class="glyphicon glyphicon-triangle-bottom"></span></button>
        </span>
      </th>
      <th>Col3&nbsp;<span><button class="btn btn-default btn-xs" type="button" value="+"><span class="glyphicon glyphicon-triangle-bottom"></span></button>
        </span>
      </th>
    </tr>
  </thead>
  
  <tbody class="collapse in">
    <tr class="searchC">
      <td>william</td>
      <td>2</td>
      <td>*</td>
    </tr>
    <tr class="searchC">
      <td>james</td>
      <td>1</td>
      <td>^</td>
    </tr>
    <tr class="searchC">
      <td>sarah</td>
      <td>3</td>
      <td>$</td>
    </tr>
  </tbody>
  <tfoot class="collapse in">
    <tr name="noexport">
      <td colspan=3>
        <span...

JavaScript

//from http://stackoverflow.com/questions/22317951/export-html-table-data-to-excel-using-javascript-jquery-is-not-working-properl
function fnExcelReport()
{
    //var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
    var tab_text="<table border='1px'><tr>";
    tab = document.getElementById('myTable'); // id of table
    for(var j = 0 ; j < tab.rows.length ; j++) 
    {     
        var index = tab.rows[j].outerHTML.indexOf('name="noexport"');
        if(index == -1){
					tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
        }
    }

    tab_text=tab_text+"</table>";
    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
    tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
	
  	//console.log(tab_text);
    sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
    //sa = window.open('data:text/csv;charset=utf-8,' + encodeURIComponent(tab_text), "tableExport.csv");

    return (sa);
}
document.getElementById("export").onclick = fnExcelReport;

function search(){
  var tab = document.getElementById('myTable');
  for(var j = 0 ; j < tab.rows.length ; j++) 
    {     
        var indexOfSearchClass = tab.rows[j].outerHTML.indexOf('searchC');
        if(indexOfSearchClass > -1){
        var indexOfSearchValue = tab.rows[j].innerHTML.indexOf(this.value);
					if(indexOfSearchValue == -1 && tab.rows[j].style.display != "none"){
          	tab.rows[j].style.display = "none";
          } else if(indexOfSearchValue > -1 && tab.rows[j].style.display == "none"){
          tab.rows[j].style.display = "table-row";
          }
        }
    }
}
document.getElementById("inputSearch").oninput = search;