Bdtjtk

I want to filter out table before loading it to reduce it's size that it would load faster, when its loaded i would like to let user to filter it. I am using public CDN script for filter part, but it does not work on content which is injected to . It only works if whole table is loaded together with page.. what i'am doing wrong?

Jsfilter:  <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tablefilter/2.5.0/tablefilter.js"></script>

DetailedRport.html

//this function called on button click it gets user and date to resize data set

<script type="text/javascript">

function myFunction() {

  var y = document.getElementById("month-input").value;

  var z = document.getElementById("email2").value;



 //here is called server side script

 google.script.run.withSuccessHandler(onSuccess).functionToRunOnFormSubmit(y, z);

}

//Resized data set gets injected to tbody

  function onSuccess(c){

  var table=toHTMLTable(c); 

  document.getElementById('myOutput1').innerHTML = table;

}

//Array to HTML table

function toHTMLTable(a) {

  var content = a.map(function(row, i) {

    var rowHTML = row.map(function (col) {

      return "<td>" + col + "</td>";

    }).join("");



    return "<tr>" + rowHTML + "</tr>";

  }).join("");

  return content;

}    

</script>

//user selects criteria for data table

<b> Report for:</b>

<select value="" name="email2" id="email2" width="300" autofocus="autofocus" autocorrect="off" autocomplete="off">

   <?!= myEmails(); ?>

</select>



<b>Pick Period :</b>

<select name="Student" id="month-input" autofocus="autofocus" autocorrect="off" autocomplete="off">

   <?!= myDates(); ?>

</select>

//On click table is loaded based on selection

<input type="button" value="Load Data" class="loadbutton" onclick="myFunction();" >



<br><br>

//Js tablefilter which should work but does not if table is injected

<table id="table1"class="mytable TF" cellspacing="0" cellpadding="0">

<thead>

 <tr class="header">

  <th style="width:5%;">TASK</th>

  <th style="width:20%;">PROJECT</th>

  <th style="width:30%;">DATE</th>

  <th style="width:10%;">TIME SPENT</th>

  <th style="width:10%;">WORDCOUNT</th>

  <th style="width:10%;">SPEED</th>

 </tr>

</thead>

//Where data table is injected

<tbody id="myOutput1">



</tbody>

</table>

//Setting Js tablefilter source http://tablefilter.free.fr/

<script language="javascript" type="text/javascript">

var tf = setFilterGrid("table1");



</script> 

server.gs

// here data set gets filtered based on users selection and is sent back

// Using ArrayLib library

function functionToRunOnFormSubmit(y,z)  {

  var ss = SpreadsheetApp.openById(id);

  var ActiveSheet = ss.getSheetByName("TogglMap");

  var StartRow = 2;

  var RowRange = ActiveSheet.getLastRow() - StartRow + 1;



  var EMWholeRange = ActiveSheet.getRange(StartRow,2,RowRange,13);

  var AllValues = EMWholeRange.getDisplayValues();



  var dat = y +'-01'



  var removeCol = function(arr, colIndex, colIndex2) {

    for (var i = 0; i < arr.length; i++) {

      var row = arr[i];

      row.splice(colIndex, colIndex2);

    }

  }



  removeCol(AllValues, 5 , 6);

  var filteredArr1 =  ArrayLib.filterByText(AllValues, 1, z)



  var filteredArr2 =  ArrayLib.filterByText(filteredArr1, 3, dat)

  removeCol(filteredArr2, 1 ,1);



  Logger.log(AllValues)

  return filteredArr2

};

My goal is working JS filter