我遵循了this web上的教程,以在modal_bootsrap中显示数据。 在本教程中,有一个使用modal_bootstrap编辑数据的操作,而我想使用该部分显示数据行的详细信息。 我想以模态显示数据表,如下图:
此表格为模态:
<div class="modal-body">
<table>
<tr>
<th>Kode Rumah Jaga</th>
<td name="field1">RJ01</td>
</tr>
<tr>
<th>Daerah Irigasi</th>
<td name="field2">Gebong</td>
</tr>
<tr>
<th>Juru Pengairan</th>
<td name="field3">Gebong 1</td>
</tr>
<tr>
<th>Nama Rumah Jaga</th>
<td name="field4">Gebong</td>
</tr>
<tr>
<th>Petugas</th>
<td name="field5">Nasardi</td>
</tr>
<tr>
<th>Kecamatan</th>
<td name="field6">-</td>
</tr>
<tr>
<th>Desa</th>
<td name="field7">-</td>
</tr>
<tr>
<th>Dusun</th>
<td name="field8">-</td>
</tr>
<tr>
<th>Tahun Pembuatan</th>
<td name="field9">-</td>
</tr>
<tr>
<th>Tahun Renovasi</th>
<td name="field10">-</td>
</tr>
</table>
查看我的Ajax:
<script type="text/javascript">
$(document).ready(function() {
$('#rj-table').DataTable({
"ajax": {
url : "<?php echo site_url("main/rj_page") ?>",
type : 'GET'
},
});
});
function view_detail(id){
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('main/ajax_view')?>/" + id,
type: "GET",
dataType: "JSON",
success: function(data)
{
$('[name="field1"]').val(data.id_rumahjaga);
$('[name="field2"]').val(data.daerahirigasi);
$('[name="field3"]').val(data.jurupengairan);
$('[name="field4"]').val(data.namrumahjaga);
$('[name="field5"]').val(data.petugas);
$('[name="field6"]').val(data.kecamatan);
$('[name="field7"]').val(data.desa);
$('[name="field9"]').val(data.dusun);
$('[name="field10"]').val(data.tahunpembuatan);
$('#modal_form').modal('show');
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
</script>
这是我的控制器
function rj_page(){
// Datatables Variables
$draw = intval($this->input->get("draw"));
$start = intval($this->input->get("start"));
$length = intval($this->input->get("length"));
$rumahjaga = $this->m_data->get_db_rj();
$no = $this->input->get('start');
$data = array();
foreach($rumahjaga->result() as $r){
$no++;
$row = array();
$row[] = $no;
$row[] = $r->namaDI;
$row[] = $r->namarumahjaga;
$row[] = '<a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Edit" onclick="view_detail('."'".$r->idrumahjaga."'".')"><i class="glyphicon glyphicon-pencil"></i> Edit</a>';
$data[] = $row;
}
$output = array(
"draw" => $draw,
"recordsTotal" => $rumahjaga->num_rows(),
"recordsFiltered" => $rumahjaga->num_rows(),
"data" => $data
);
echo json_encode($output);
exit();
}
public function ajax_view($id)
{
$data = $this->m_data->get_by_id_rj($id);
echo json_encode($data);
}
我的模特
function get_db_rj(){
$this->db->select('*');
$this->db->from('rumahjaga');
$this->db->join('daerahirigasi', 'daerahirigasi.kodeDI = rumahjaga.kodeDI');
$query = $this->db->get();
return $query;
}
public function get_by_id_rj($id)
{
$this->db->select('*');
$this->db->from('rumahjaga');
$this->db->join('daerahirigasi', 'daerahirigasi.kodeDI = rumahjaga.kodeDI');
$this->db->where('idrumahjaga',$id);
$query = $this->db->get();
return $query->row();
}
我非常感谢愿意花时间解决这个问题的人
答案 0 :(得分:1)
我得到了解决方案:
$('[name="field1"]').val(data.id_rumahjaga);
和
<td name="field1"></td>
更改为
$('#field1').html(data.id_rumahjaga);
<td id="field1"></td>
感谢post