我想显示一个包含数据库数据的弹出窗口。这里我在onclick()上使用AJAX函数。返回的数据将显示在该弹出窗口中。这里弹出窗口包含表格，所以我不知道如何在表格上显示数据。
<a href="" class="rqstName" data-toggle="modal" data-target="#leaveTeacherModal" id="teacher_profile" onclick="profile_view(<?php echo $leave_data->applied_user_id;?>)"><?php echo $leave_data->teacher_name;?></a>
弹出
<div class="modal fade" id="leaveTeacherModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog leaveRqstModal-Dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">Leave Details</h3>
</div>
<div class="modal-body">
<input type="hidden" name="profile_id" id="profile_id">
<div class="leavReqstModalBody">
<div class="row">
<div class="col-md-2">
<div class="lveReqstDetails">
<div class="stdntPrflePic">
<img src="<? echo base_url();?>application/assets/dist/img/user8-128x128.jpg">
</div>
<div class="studentDetails">
<label for="exampleInputEmail1">Robert De Niro</label>
<div class="clearfix"></div>
<label for="exampleInputEmail1">STD 10 <label> DIV A</label></label>
<div class="clearfix"></div>
<label for="exampleInputEmail1">Class Teacher :</label>
<label for="exampleInputEmail1">Sruthi </label>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="lveReqstDesc">
<div class="row">
<div class="block2">
<div class="prevREcords">
<div class="box">
<div class="box-header">
<h3 class="box-title">Previous Leave Records</h3>
</div><!-- /.box-header -->
<div class="box-body">
<table id="prevREcords" class="table table-bordered table-striped">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th class="reason">Reason</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="slectCheckbox">20-Jan - 25-Jan</td>
<td><a href="" class="rqstName" data-toggle="modal" data-target="#leaveRqstModal">Internet
Explorer 5.0,</a></td>
<td>Win 95+</td>
</tr>
<tr>
<td><input type="checkbox" class="slectCheckbox">20-Jan - 25-Jan</td>
<td><a href="" class="rqstName" data-toggle="modal" data-target="#leaveRqstModal">Internet
Explorer 5.0,</a></td>
<td>Win 95+</td>
</tr>
<tr>
<td><input type="checkbox" class="slectCheckbox">20-Jan - 25-Jan</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Select</th>
<th>Name</th>
<th>Reason</th>
</tr>
</tfoot>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="prevMonthAttendence">
<h5>Previous Month Atteendence</h5>
<!--<canvas id="prevMonthAttndnce" width="400" height="400"></canvas>-->
<canvas id="prevMonthAttndnce" height="300" width="300"></canvas>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="stdntPrfleDetails">
<div class="control-group">
<h4 class="">Applicant Details</h4>
<hr>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<label for="exampleInputEmail1">Applicant Name</label>
</div>
<div class="col-md-6">
<div class="col-sm-12">
<label for="exampleInputEmail1">Robert De Niro</label>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-6">
<label for="exampleInputEmail1">Reason</label>
</div>
<div class="col-md-6">
<div class="col-sm-12">
<label for="exampleInputEmail1">HeadAce</label>
</div>
</div>
<div class="col-md-6">
<label for="exampleInputEmail1">Applicant Name</label>
</div>
<div class="col-md-6">
<div class="col-sm-12">
<label for="exampleInputEmail1">Robert De Niro</label>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-6">
<label for="exampleInputEmail1">Reason</label>
</div>
<div class="col-md-6">
<div class="col-sm-12">
<label for="exampleInputEmail1">HeadAce</label>
</div>
</div>
<div class="col-md-6">
<label for="exampleInputEmail1">Applicant Name</label>
</div>
<div class="col-md-6">
<div class="col-sm-12">
<label for="exampleInputEmail1">Robert De Niro</label>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-6">
<label for="exampleInputEmail1">Reason</label>
</div>
<div class="col-md-6">
<div class="col-sm-12">
<label for="exampleInputEmail1">HeadAce</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<label for="exampleInputEmail1">Applicant Name</label>
</div>
<div class="col-md-6">
<div class="col-sm-12">
<label for="exampleInputEmail1">First Name</label>
</div>
</div>
<div class="col-md-6">
<label for="exampleInputEmail1">Attached Documents</label>
</div>
<div class="col-md-6">
<div class="col-sm-12">
<label for="exampleInputEmail1"><a href="">Mediacl Certificate</a>,<a href="">Photo</a></label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="submitComments">
<div class="widget-area no-padding blank">
<div class="status-upload">
<form>
<textarea placeholder="Remarks" ></textarea>
</form>
</div><!-- Status Upload -->
</div><!-- Widget Area -->
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-md-6 col-md-offset-6">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
</div>
<div class="btn-group" role="group">
<button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Accept</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
控制器
function Prev_leave_record()
{
$teacher_id=$this->input->post('id');
$teacher_profile=$this->AM->prev_record($teacher_id);
$out=array('teacher_details'=>$teacher_profile);
echo json_encode($out);
}
模型
function prev_record($teacher_id)
{
$this->db->select('teacher_name,applied_user_id,leave_from_date,leave_to_date,leave_short_desc,leave_status');
$this->db->from('leave_data');
$this->db->join('ms_teacher','ms_teacher.teacher_id=leave_data.applied_user_id');
$this->db->where('applied_user_id',$teacher_id);
$teacher_details=$this->db->get();
return $teacher_details;
}
<script type="text/javascript">
function profile_view(id3)
{
//document.getElementById("profile_id").value= id3;
var a = id3;
$.ajax({
type : "POST",
url : "<? echo base_url();?>Attendance/Prev_leave_record",
data : {"id":id3},
dataType : "json",
success : function(res) {
//var result = $.parseJSON(data);
},
error : function(res){
}
});
}
</script>
答案 0 :(得分：0)
下面是js小提琴，它解释了如何将json数据显示到表中
$.ajax({
url: '/echo/json/',
type: "post",
dataType: "json",
data: {
json: JSON.stringify([
{
id: 1,
firstName: "Peter",
lastName: "Jhons"},
{
id: 2,
firstName: "David",
lastName: "Bowie"}
]),
delay: 3
},
success: function(data, textStatus, jqXHR) {
// since we are using jQuery, you don't need to parse response
drawTable(data);
}
});
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
}
function drawRow(rowData) {
var row = $("<tr />")
$("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
row.append($("<td>" + rowData.id + "</td>"));
row.append($("<td>" + rowData.firstName + "</td>"));
row.append($("<td>" + rowData.lastName + "</td>"));
}