jquery dynamic created th and tr from ajax call response - laravel

Question

I want to create table head dynamic and table rows dynamic also, I don't where I am doing wrong.
I'm using Laravel for the data population of Data tables.
This is my response. I have two response, one for table heads and other table rows.
{"draw":0,"recordsTotal":14,"recordsFiltered":4,"data":[{"leaveTypeId":20,"leaveName":"Annual Leave"},{"leaveTypeId":7,"leaveName":"Hajj leave"},{"leaveTypeId":19,"leaveName":"TOIL"},{"leaveTypeId":11,"leaveName":"Unpaid leave"},{"leaveTypeId":2,"leaveName":"Sick Leave"},{"leaveTypeId":5,"leaveName":"Paternity leave"},{"leaveTypeId":6,"leaveName":"Maternity leave"}
,"emp":[{"id":327,"empName":"Abbas "},{"id":162,"empName":"Abdo"},{"id":407,"empName":"Abdo"},{"id":411,"empName":"Abdo"},{"id":219,"empName":"Abdu"},{"id":334,"empName":"Abdul Hakeem "},{"id":330,"empName":"Abdul Kareem "},{"id":412,"empName":"Abdulaleem"},{"id":246,"empName":"Abdulaziz"},{"id":301,"empName":"Abdulfatah"},{"id":100,"empName":"Abdulgani"},{"id":364,"empName":"Abduljaleel "},{"id":95,"empName":"Abdulkareem"},{"id":287,"empName":"Abdulkareem"},{"id":413,"empName":"Abdulkarim"},{"id":711,"empName":"Abdulkhaliq"},{"id":15,"empName":"Abdullah"},{"id":19,"empName":"Abdullah "},{"id":69,"empName":"Abdullah"},{"id":70,"empName":"Abdullah"},{"id":71,"empName":"Abdullah"},{"id":96,"empName":"Abdullah "},{"id":97,"empName":"Abdullah "},{"id":200,"empName":"Abdullah "},{"id":243,"empName":"Abdullah"},{"id":244,"empName":"Abdullah"},{"id":249,"empName":"Abdullah"},{"id":258,"empName":"Abdullah"},{"id":455,"empName":"Abdullah "},{"id":546,"empName":"Abdullah "},{"id":591,"empName":"Abdullah "},{"id":708,"empName":"Abdullah"},{"id":542,"empName":"Abdulmalik"}}
at balde page, I'm using like this.
<table id="LeaveSummaryGrid" class="table table-bordered table-striped">
<thead>
</thead>
<tbody>
</tbody>
</table>
And my ajax call like this.
$.ajax({
type: "get",
url: url_search,
//dataType:"json",
//data: data,
success: function (response)
{
var count = 1;
var trHTML = '';
$.each(response.data, function (key,value) {
trHTML +=
'<tr><th> EmpName' +
'</th><th colspan="3">' + value.leaveName +
'</th></tr>' +
'<tr><th>' +
'</th><th>Ent.' +
'</th><th>Ava.' +
'</th><th>Bal.' +
'</th></tr>'
;
count++;
/*header.append(
$('<th colspan="3"> jh </th></tr><tr><th>Ent.</th><th>Ava.</th><th>Bal.</th>')
);*/
});
$('#LeaveSummaryGrid thead').append(trHTML);
}
});
But this populating into rows.
I want the desired result like below shown in image.
enter image description here
EmpName
Annual Leave
Sick Leave
TOIL Leave
Maternity Leave
Paternity Leave
Each Leave type has sub table head i.e. Entitle, Availed, Balance

Answer 1

<table id="LeaveSummaryGrid" class="table table-bordered table-striped">
<thead id="thead">
</thead>
<tbody>
</tbody>
</table>
$.ajax({
type: "get",
url: url_search,
//dataType:"json",
//data: data,
success: function (response)
{
$.each(response.data, function (key,value) {
$('#thead').append("<tr><th> EmpName'+ value.leaveName +'</th></tr>" //and so on ...);
/*header.append(
$('<th colspan="3"> jh </th></tr><tr><th>Ent.</th><th>Ava.</th><th>Bal.</th>')
);*/
});

Answer 2

I resolve by myself and work well.
JS would be
$.ajax({
type: "get",
url: url_search,
//dataType:"json",
//data: data,
success: function (response)
{
var count = 1;
var trHTML = '';
var thLeave ='';
var thSub ='';
$.each(response.data, function (key,value) {
thLeave+= '<th colspan="3">'+value.leaveName+'</th>';
thSub+= '<th>Ent.</th>' +
'<th>Ava.</th>' +
'<th>Bal.</th>';
});
var table = `
<table id="LeaveSummaryGrid" class="table table-bordered table-striped">
<tr>
<th rowspan="2">EmpName</th>`+
thLeave+
`</tr>
<tr>`+
thSub+
`</tr>
</table>
`;
$('#Table').append(table);
}
});
AND HTML would be
<div class="table-responsive" id="Table">
</div>
so it created.
enter image description here