[Solved] I am creating a page which involves creating a new html table every time depending on the selected option ,how to go about it?

Question

Ok, you wrote api handler for option number 2: “Device Assign policies”.
Then, handler returns json response which converts to the table and appends to the body.

Next, as I got, you need to handle other options from select. And those options also are related to the same table from previous response.

So, by clicking on any option you need: retrieve some json data from api handler and redraw the table.

For such purpose you need:

1) Inintialize some frontend table from empty response on page load:
`

function drawTableFromResponse(response) {
    var body = '';
    $.each(response.header,function(key,value){
           body += '<thead><tr></tr></thead>';
           // draw table header from response
    }

    $.each(response.body,function(key,value){
           body += "<tr>";
           body += "<td>"+value.device_id+"</td>";
           ...
           ...
           body += "</tr>";
           // draw table body from response
       });

       $("#tab tbody").append(body);
       $("#tab").DataTable();
}

drawTableFromResponse({header: [], body: []});

`

2) on option changing and submitting the form – you will retrieve new response and redraw the table:

$('#dashboard').submit(function(e) {
    .....
    .....
    .....

    success: function(response) {
        drawTableFromResponse(response);
    }
});

3) That’s all you need in JS. Rest of logic (check which option was clicked, combine header/body columns etc.) should be in your api handler: dashboard.php.

Accepted Answer