ajaxupdate

 <!-- modals edit -->
                   <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true" id="Modal_Edit">
                    <div class="modal-dialog modal-lg">
                      <div class="modal-content">

                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                          </button>
                          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                        </div>
                        <div class="modal-body">
                        <form class="form-horizontal form-label-left input_mask" id="form_suplier">

                      <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                        <input type="text" class="form-control has-feedback-left" id="nama_supplier" placeholder="Nama Suplier" name="nama_supplier">
                        <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
                      </div>

                      <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                        <input type="text" class="form-control" id="fax" placeholder="Fax" name="fax">
                        <span class="fa fa-fax form-control-feedback right" aria-hidden="true"></span>
                      </div>

                      <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                        <input type="text" class="form-control has-feedback-left" id="email" placeholder="Email" name="email">
                        <span class="fa fa-envelope form-control-feedback left" aria-hidden="true"></span>
                      </div>

                      <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                        <input type="text" class="form-control" id="telepon" placeholder="Phone" name="telepon">
                        <span class="fa fa-phone form-control-feedback right" aria-hidden="true"></span>
                      </div>

                      <div class="form-group">
                        <label class="control-label col-md-1 col-sm-3 col-xs-12">Alamat</label>
                        <div class="col-md-7 col-sm-9 col-xs-12">
                          <textarea class="form-control" rows="3" placeholder="Alamat" name="alamat" id="alamat"></textarea>
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="control-label col-md-1 col-sm-3 col-xs-12">Kategori</label>
                        <div class="col-md-4 col-sm-3 col-xs-12">
                          <select class="form-control has-feedback-left" name="kategori" id="kategori">
                            <option name="kategori" id="kategori"></option>

                          </select>
                          <span class="fa fa-tasks form-control-feedback left" aria-hidden="true"></span>
                        </div>

                      </div>

                     <!--  <div class="ln_solid"></div>
                      <div class="form-group">
                        <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-5">

                         <button class="btn btn-primary" type="reset">Reset</button>
                          <button type="submit" class="btn btn-success" id="btn-save">Submit</button>
                        </div>
                      </div> -->

                    </form>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                          <button type="submit" class="btn btn-primary">Save changes</button>
                          <a href="#" title=""></a>
                        </div>

                      </div>
                    </div>
                  </div>
          <!-- endmodals -->
          <script src="<?php echo base_url()?>assets/js/jquery.js"></script>
          <script type="text/javascript">
            $(document).ready(function(){
                list_suplier();
                $('#datatable').DataTable()
              // get suplier
              function list_suplier()
              {
                $.ajax({
                  type    : 'ajax',
                  url     : '<?php echo base_url('Suplier/listsuplier')?>',
                  async   : true,
                  dataType: 'json',
                  success : function(data){
                    var html = '';
                    var i;
                    for(i=0; i<data.length; i++){
                      html += '<tr class="even pointer">'+
                            '<td class="a-center ">'+
                              '<input type="checkbox" class="flat" name="table_records">'+
                            '</td>'+
                            '<td class=" ">'+data[i].nama_supplier+'</td>'+
                            '<td class=" ">'+data[i].alamat+'</td>'+
                            '<td class=" ">'+data[i].kategori+'</td>'+
                            '<td class=" ">'+data[i].email+'</td>'+
                            '<td class=" ">'+data[i].telepon+'</td>'+
                            '<td class="a-right a-right ">'+data[i].fax+'</td>'+
                            '<td style="text-align:left;">'+
                                    '<a href="javascript:void(0);" class="btn btn-info btn-sm item_edit" data-id_suplier="'+data[i].id_supplier+'" data-nama_supplier="'+data[i].nama_supplier+'" data-alamat="'+data[i].alamat+'" data-kategori="'+data[i].kategori+'" data-email="'+data[i].email+'" data-telepon="'+data[i].telepon+'" data-fax="'+data[i].fax+'">Edit</a>'+' '+
                                    '<a href="javascript:void(0);" class="btn btn-danger btn-sm item_delete" data-product_code="'+data[i].product_code+'">Delete</a>'+
                                '</td>'+
                         ' </tr>';
                    }
                    $('#show_data').html(html);
                  }
                });
              }

              // end get suplier

              //edit
              $('#show_data').on('click','.item_edit',function(){

               var nama_supplier = $(this).data('nama_supplier');
               var alamat        = $(this).data('alamat');
               var kategori      = $(this).data('kategori');
               var email         = $(this).data('email');
               var telepon       = $(this).data('telepon');
               var fax           = $(this).data('fax');
               var id_supplier   = $(this).data('id_supplier');

               // var nama_supplier = $('#nama_supplier').val();
               // var alamat        = $('#alamat').val();
               // var kategori      = $('#kategori').val();
               // var email         = $('#email').val();
               // var telepon       = $('#telepon').val();
               // var fax           = $('#fax').val();
               // var id_supplier   = $('#id_supplier').val();

               $('#Modal_Edit').modal('show');
               $('[name="nama_supplier"]').val(nama_supplier);
               $('[name="alamat"]').val(alamat);
               $('[name="kategori"]').val(kategori);
               $('[name="email"]').val(email);
               $('[name="telepon"]').val(telepon);
               $('[name="fax"]').val(fax);
              });
              //end of edit
            });
          </script>