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" >
<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

Each Leave type has sub table head i.e. Entitle, Availed, Balance

CodePudding user response：

<table id="LeaveSummaryGrid" >
<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>')
                        );*/

                    });

CodePudding user response：

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" >
                                    <tr>
                                        <th rowspan="2">EmpName</th>` 
                                        thLeave 
                                    `</tr>
                                    <tr>` 
                                        thSub 
                                    `</tr>
                                </table>
                                `;

                    
                    $('#Table').append(table);

                }
            });

AND HTML would be

<div  id="Table">

                    </div>

so it created. enter image description here