Фильтр Javascript на HTML-таблицу не работает, если он введен в div.если таблица загружается со страницей, она работает - PullRequest
Новая
       47

Фильтр Javascript на HTML-таблицу не работает, если он введен в div.если таблица загружается со страницей, она работает

0 голосов
/ 28 декабря 2018

Я хочу отфильтровать таблицу перед загрузкой, чтобы уменьшить ее размер, чтобы она загружалась быстрее, при ее загрузке я бы хотел позволить пользователю отфильтровать ее.Я использую общедоступный сценарий CDN для фильтрующей части, но он не работает с контентом, который вводится.Это работает только если вся таблица загружается вместе со страницей .. что я делаю не так?

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

DetailRport.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
};

Моя цель - работа фильтра JS

...