Represent json from jquery ajax response into a html's table

Question

I create a search form that using ajax as the action. In success ajax, how can I just load some specific div without load all refresh page. This is my form

<?php
        $properties = array('id' => 'form1');
        echo form_open("", $properties);
        ?>

        <fieldset>
            <div class="controls" id="chekboxes">
                <label class="checkbox "><input type="checkbox" name="criteria[]" id="nomorcb"/> Nomor Request </label>
                <input type="text" class="input-xlarge focused" id="no" name="no" placeholder="Masukkan No Request..."/>

                <label class="checkbox "><input type="checkbox" name="criteria[]" id="namacb"/> Nama User </label>
                <input type="text" class="input-xlarge focused" id="nama" name="nama" placeholder="Masukkan Nama User..."/>

                <label class="checkbox "><input type="checkbox" name="criteria[]" id="departementcb" /> Departement</label>
                <div class="control-group">
                    <div class="controls">
                        <select class="input-xlarge" id="selectError" name="dep">
                            <option value="">-- Pilih departement --</option>

                            <?php
                            foreach ($dep as $data) {
                                echo "<option value='" . $data['nama_departement'] . "'>" . $data['nama_departement'] . "</option>";
                            }
                            ?>
                        </select>
                    </div>
                </div>

                <label class="checkbox "><input type="checkbox" name="criteria[]" id="rentangcb"/> Rentang waktu</label>
                <div class="controls" id="tanggal-rentang">
                    <input type="text" class="input-small datepicker" id="tanggal" value="" name="tgl_awal"><span> &nbsp; &nbsp; &nbsp;s/d </span>
                    <input type="text" class="input-small datepicker" id="tanggal2" value="" name="tgl_akhir">
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary" id="submit">Cari</button>
                <button type="reset" class="btn" id="cancel">Cancel</button>
            </div>
        </fieldset>
        <?php echo form_close(); ?> 

this is the action's code for execute the form.

  public function search() {
    $id_request = $this->input->post('nomor');
    $nama_user = $this->input->post('nama');
    $departement = $this->input->post('departement');
    $awal = $this->input->post('tgl_awal');
    if ($awal != "") {
        $awal = $this->input->post('tgl_awal');
    } else {
        $awal = "2014-01-01";
    }
    $timestamp_awal = strtotime($awal);
    $tgl_awal = date("Y-m-d H:i:s", $timestamp_awal);

    $akhir = $this->input->post('tgl_akhir');
    if ($akhir != "") {
        $akhir = $this->input->post('tgl_akhir');
    } else {
        $akhir = "2020-01-01";
    }

    $timestamp_akhir = strtotime($akhir);
    $tgl_akhir = date("Y-m-d H:i:s", $timestamp_akhir);

    $data = $this->model_request->search($id_request, $nama_user, $departement, $tgl_awal, $tgl_akhir);
     echo json_encode($data);
}

and this is the Ajax jquery for form above :

$('form').on('submit', function() {
   var nomor = $('#no').val();
   var nama = $('#nama').val();
   var departement = $('#selectError').val();
   var tgl_awal = $('#tanggal').val();
   var tgl_akhir = $('#tanggal2').val();

   $.ajax({
        url: '<?php echo base_url() . 'it_team/control_it/search' ?>',
        type: 'POST',
        data: {nomor: nomor,
               nama: nama,
               departement: departement,
               tgl_awal: tgl_awal,
               tgl_akhir: tgl_akhir},
               dataType: 'json',
               success: function(obj) {
                  //Please give me an idea
               }
        });
     return false;

For testing, I try seearch and thank God, it gives me a success on json like this:

[{"id_request":"015","nama_user":"Dzil","departement":"IT","waktu_it_terima":"2015-06-19 02:51:05"},
{"id_request":"017","nama_user":"Dzil","departement":"IT","waktu_it_terima":"2015-06-19 13:32:46"}]

My problem is, the result of search form above will be displaying into a table in same page with the form above. You know, in tbody's table will be generate the object on based the return of json. I am newbie using json. The table looked like this

 <div class="box-content" id="things_table2"> 
        <table class="table table-bordered table-striped table-condensed" id="table1">
            <thead>
                <tr>
                    <th>No.  </th>
                    <th>No Request</th>
                    <th>Nama user</th>
                    <th>Departement</th>                                            
                    <th>Tanggal Request</th>
                    <th>Action</th>
                </tr>
            </thead>   
            <tbody id="hasil-pencarian">
                // Result will be showing here
            </tbody>
        </table>
    </div>

Any help it so appriciated.

Answer 1

There is nothing special about json. Treat it like any js object, ie after parsing it.

Since its just an array of objects, you can iterate over it and do whatever.

var html = '';
$.each(data, function (index, element) {
  // build your html
  html += '<tr>;'
  html += '<td>'+ index + 1 + '</td>';
  html += '<td>'+ element.id_request + '</td>';
  // same for other elements use `element.<key-name>`
  // end tr after all the td's are done
  html += '</tr>;'
});

Once you have iterated over all the elements, inject it in the dom.

$('.DOM-ELEMENT').html(html);

Answer 2

Try like this (beware there are less fields in your json than in your table):

var data = [
  {
    'id_request': '015',
    'nama_user': 'Dzil',
    'departement': 'IT',
    'waktu_it_terima': '2015-06-19 02:51:05'
  },
  {
    'id_request': '017',
    'nama_user': 'Dzil',
    'departement': 'IT',
    'waktu_it_terima': '2015-06-19 13:32:46'
  }
];

var html = '';
for (var i = 0; i < data.length; i++) {
  var td="";
  for(var key in data[i]){
    td+='<td>'+data[i][key]+'</td>';

  }
  html+="<tr>"+td+"</tr>";
}

$('#hasil-pencarian').html(html);