2017-02-18 18 views
0

JavaScriptで変数を設定したので、別の同様のテーブルから動的にフラスコ生成テーブルをフィルタリングしたいと思います。変数でのflask jinja2テーブルの生成

残念ながら、(jinja2コンテキストはJavascriptより前に実行されるため)残念ながら、Javascript変数はJinja2コンテキストでは再利用できないようです。

以下の例では、project_idでタスクをフィルタリングしたいと思います。このproject_idは、別の表で選択された値のおかげで設定されました。

注:このソリューションのおかげで、ページをリロードすることは避けてください。

{% for Task in mytasks %} 
    {% if Task.project_id == var_project_id %} <- Not working, the javascript variable is not recognized 
     <tr class="clickable-row"> 
     <td style="display:none;"> {{ Task.task_id }} </td> 
     <td style="display:none;"> {{ Task.project_id }} </td> 
     <td>{{ Task.title }}</td> 
     <td class="task_description" > {{ Task.description }} </td> 
     <td class="task_creation_date"> {{ Task.creation_date }} </td> 
     </tr> 
    {% endfor %} 
+0

。また、AFAIK Jinjaはサーバ側で処理されます(JavaScriptはクライアント側で実行されます)。JavaScriptベースのもの(バニラJS、jQuery、またはフロントエンドフレームワーク)を使用する必要があります。 – UnholySheep

+0

ありがとうUnholySheep、今。ブートストラップにホバーテーブルを使って作業する例がありますか? – nico59128

答えて

0

シンプルなjavascript機能のおかげで解決策が見つかりました。ここで

は他のいくつかのいずれかが同じ問題を持っているだけの場合には、それである:

<script>  
//The project id is defined when the project is selected in a hover table 
$('#myTableProject tbody tr').click(function (event) { 
$('tr').not(this).removeClass('highlight'); 
$(this).addClass('highlight'); 
project_id = $(this).find('td.project_id').text(); 
//... 
var tableTasks; 
tableTasks = document.getElementById("myTableTasks"); 
tr = tableTasks.getElementsByTagName("tr"); 
// Loop through all table rows, and hide those who don't match the search query 
for (i = 0; i < tr.length; i++) { 
td = tr[i].getElementsByTagName("td")[1];// [1] is the column number you want to filter 
if (td) { 
    //each cell of the column [1] is compared to the project id 
    if (td.innerHTML.toUpperCase().indexOf(project_id) > -1) { 
    tr[i].style.display = "";//the data is displayed 
    } else { 
    tr[i].style.display = "none";//the data is hidden 
    } 
} } 
</script> 

詳細情報:あなたは、実際の質問をするのを忘れて https://www.w3schools.com/howto/howto_js_filter_table.asp

関連する問題