我在控制器中有一个函数,它将返回一个包含dataBase数据的数组,该数据将作为json文件发送到我的success函数, 我想在我的模态中显示div中的那些信息,我不能这样做,所以这是我的控制器功能:
public function list_salle($id)
{
$data= $this->salle_model->get_all_salle($id);
$this->output->set_output(json_encode($data));
}
这是我的js函数及其ajax:
function consulter_salle(id)
{
$.ajax({
url : "<?php echo site_url('index.php/batiment/list_salle')?>/"+id,
type: "POST",
dataType: "JSON",
success: function(data)
{
var table_header = "<table class='table table-striped table-bordered'><thead><tr><td>head_x</td><td>head_y</td></tr></thead><tbody>";
var table_footer = "</tbody></table>";
var html ="";
for (row in data)
{
html += "<tr><td>"+data.id +"</td><td>"+data.libelle+"</td></tr>";
}
var all = table_header +html+ table_footer;
// show bootstrap modal when complete loaded
$('.modal-title').text('Test');
$('#salle_list').html(all);
$('#modal_list').modal('show');
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error displaying data');
}
});
}
这是我的模态:
<div class="modal fade" id="modal_list" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Liste des salles</h3>
</div>
<div class="modal-body form">
<form action="#" id="form" class="form-horizontal">
<div class="form-body">
<div id="salle_list"></div>
</div>
</form>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</div>
所以数据作为json文件正确发送,但我无法显示它,我认为循环中的问题和.html函数,请帮助 谢谢!
答案 0 :(得分:0)
你在ajax中的for循环看起来应该是一个foreach,但即使这样它也是错的。您正在迭代json对象,如果您想要一些替代方法,请查看此问题:How do I iterate over a JSON structure?。一个答案给出了这样一个循环:
$(jQuery.parseJSON(JSON.stringify(data))).each(function() {
html += "<tr><td>"+this.id +"</td><td>"+this.libelle+"</td></tr>";
}
答案 1 :(得分:0)
我找到了解决方案:
success: function(data)
{
var table_header = "<table class='table table-striped table-bordered'><thead><tr><td>Identifiant</td><td>Libelle</td></tr></thead><tbody>";
var table_footer = "</tbody></table>";
var html ="";
data.forEach(function(element) {
html += "<tr><td>"+element.id +"</td><td>"+element.libelle+"</td></tr>";
});
var all = table_header +html+ table_footer;
$('.modal-title').text('Liste des salles');
$('#salle_list').html(all);
$('#modal_list').modal('show');
}