2017-02-18 34 views
0

Я хотел бы динамически отфильтровать таблицу сгенерированной флягой благодаря переменной, установленной в JavaScript из другой подобной таблицы.Генерация таблицы flask jinja2 с переменной

К сожалению, кажется, что переменные Javascript нельзя использовать повторно в контексте Jinja2 (поскольку контексты jinja2 выполняются до Javascript).

В приведенном ниже примере я хотел бы отфильтровать задачи с помощью 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, это гораздо более понятно Теперь. У вас есть пример работы с таблицами-указателями в Bootstrap? – 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