How to populate data from database through AJAX and display it in table format?

Question

 <script type="text/javascript"> function select_std(){ var ali=$('#class_std').val(); $('#std_name').html(''); $.ajax({ url:"<?php echo base_url().'admin/test/'?>"+ali, type:"GET", success:function(res){ $('#std_name').append(res); } }); } 

  <select id="std_name" class="form-control"> </select> 

I have populated dropdown menu through AJAX and it works fine. However, I want to display it in table format, how can I do this? I have searched many sites but all in vain.

Answer 1

This is rather a too broad question for Stack Overflow, but I am happy to give some pointers.

Is the server-side under your control? If so, try returning JSON from your web server. So, rather than returning a single blob of HTML to render directly, return an array, so each element can be rendered per cell (and a two-dimensional array can render rows). Here is how to do it in jQuery .

On the server side, you'll need to render your data using json_encode() . Do this first. If you want, you can hard-wire some data on the server-side before changing it to read from a database. For example, this would get you started:

echo json_encode([
    ['cell_one' => 1, 'cell_two' => 2, ],
    ['cell_one' => 3, 'cell_two' => 4, ]
]);

Of course, you can use indexed arrays if you prefer. If you like associative arrays, do please change those key names to something more suitable.

Once you have your data, you can plot it in your success handler using a loop. Would you try that, please?