<div class="table-responsive"> <table class="table table-hover table-striped table-bordered"> <thead> <tr> <th>{{ 'FirstName'|get_lang }}</th> <th>{{ 'LastName'|get_lang }}</th> {% if show_email %} <th>{{ 'Email'|get_lang }}</th> {% endif %} <th class="text-center">{{ 'ScormTime'|get_lang }}</th> <th class="text-right">{{ 'Progress'|get_lang }}</th> <th class="text-right">{{ 'ScormScore'|get_lang }}</th> <th class="text-center">{{ 'LastConnection'|get_lang }}</th> <th>{{ 'Actions'|get_lang }}</th> </tr> </thead> <tbody> {% for user in user_list %} <tr id="row-{{ user.id }}"> <td>{{ user.first_name }}</td> <td>{{ user.last_name }}</td> {% if show_email %} <td>{{ user.email }}</td> {% endif %} <td class="text-center">{{ user.lp_time }}</td> <td class="text-right">{{ user.lp_progress }}</td> <td class="text-right">{{ user.lp_score }}</td> <td class="text-center">{{ user.lp_last_connection }}</td> <td> <button class="btn btn-primary btn-sm" data-id="{{ user.id }}">{{ 'Details'|get_lang }}</button> </td> </tr> <tr class="hide"></tr> {% endfor %} </tbody> </table> </div> <script> $(document).on('ready', function () { $('tr td button').on('click', function (e) { e.preventDefault(); var self = $(this); var userId = self.data('id') || 0; var trHead = self.parents('tr'); var trDetail = trHead.next(); if (self.is('.active')) { self.removeClass('active'); trDetail.html('').addClass('hide'); } else { self.addClass('active'); var newTD = $('<td>', { colspan: 7 }); newTD.load('{{ _p.web_main ~ 'mySpace/lp_tracking.php?action=stats&extend_all=0&id_session=' ~ session_id ~ '&course=' ~ course_code ~ '&lp_id=' ~ lp_id ~ '&student_id=\' + userId + \'&origin=tracking_course&allow_extend=0' }} .table-responsive', function () { newTD.appendTo(trDetail); }); trDetail.removeClass('hide'); } }); }); </script>