Вложенные строки таблицы

Я работаю над проектом, который все еще находится на ранней стадии, используя Django и Jquery. Я хотел бы создать вложенную таблицу, в которой лидеры команд имели бы назначенных им людей. Пока что я смог отобразить лидеров команд, но не смог отобразить связанных с ними сотрудников.

enter image description here

Views.py
class SupervisorEmployee(View):
    def get(self,request,firstname,lastname,*args,**kwargs):
        supervisor_name=get_object_or_404(Supervisor,firstname=firstname, lastname=lastname)

        filtered_team_leaders=TeamLeaders.objects.filter(supervisor=supervisor_name.pk)


        context={
            'firstname':firstname,
            'lastname':lastname,
            'filtered_team_leaders':filtered_team_leaders,

        }
        return render(request,'supervisors/employees.html',context)


class EmployeeResponseView(View):
    def post(self,request):
        first_value = request.POST.get('first_value')
        first_value=first_value.strip()
        second_value = request.POST.get('second_value')
        second_value=second_value.strip()


        team_leader_query=get_object_or_404(TeamLeaders,fname=first_value,lname=second_value)
        employee_query=Employees.objects.filter(team_leader=team_leader_query.pk)

        data=serializers.serialize('json',employee_query)

        return HttpResponse(data,content_type='application/json')

template.html

                            <thead class="bg-secondary text-white">
                            <th>ID</th>
                            <th>firstname</th>
                            <th>lastname</th>
                            <th>Role</th>
                            <th>Joining</th>
                            <th>age</th>
                            <th>remuneration</th>
                            </thead>
                            <tbody>
                            {% for team_leaders in filtered_team_leaders %}
                            <tr id="emb" class="bg-light">
                                <input id="first" type="hidden" value="{{ team_leaders.fname|safe }}">
                                <input id="second" type="hidden" value="{{team_leaders.lname|safe }} ">
                                <td>{{ team_leaders.id }}</td>
                                <td>{{ team_leaders.fname }}</td>
                                <td>{{ team_leaders.lname }}</td>
                                <td><span class="badge bg-danger">{{ team_leaders.role }}</span></td>
                                <td>{{ team_leaders.joining }}</td>
                                <td>{{ team_leaders.age }}</td>
                                <td>{{ team_leaders.remuneration }} / day</td>
                            </tr>
                             employee data goes here
                            
                            {% endfor %}
                            </tbody>
                        </table>

шаблон, связанный с jquery, для добавления данных сотрудника ниже руководителя

 var first_value=$.trim($('#first').val());
if(second_value != '' && first_value != '') {

    $.ajax({
            url:'{% url "employee_response" %}',
            method:'POST',
            data:{'first_value':first_value,'second_value':second_value},
            success:function(data) {
                Response data from database should be embedded below each team leader

            },
            error:function() {
                alert('Error fetching employees');
            }
          });
}
Вернуться на верх