我正在制作一个狗庇护应用程序,所以我将所有的图片URL保存在数据库中。到目前为止,这是我所:如何使用HTML + JS从数据库中显示图像?
我要的是表示该P I要显示狗的照片代替。
我的代码:
的index.html
<div id="template_especie_show">
<nav class="navbar navbar-fixed-top df-nav cen col-md-12" role="navigation" style="">
<ul class="nav navbar-nav" style="width: 100%">
<li class="pull-left"><button type="button" id="especie_menu_left" class="btn btn-default btn-menu">Voltar</button></li>
<li class="pull-left"><button type="button" id="especie_menu_logout" class="btn btn-default btn-menu-logout">Sair</button></li>
<li style="float: none; display: inline-block; position: relative; text-align: center"><a href="#index"><img src="img/icone_ap.png" height="47"></a></li>
</ul>
</nav>
<div class="row vert-offset-top-30"></div>
<div class="col-md-2"></div>
<div class="col-md-8">
<div style="text-align: center"><h2><span id="animal_show_name"></span></h2></div>
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</div>
<input type="text" id="table_especie_search" class="form-control" placeholder="Procurar animais">
</div>
<table class="table table-hover" id="table_especie">
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="col-md-2"></div>
</div>
的script.js
var tableEspecie= $('#table_especie').DataTable({
"paging": false,
"info": false,
"order": [
[2, "asc" ],
[3, "asc"],
[1, "asc"]
],
"columnDefs": [
{ "visible": false, "targets": 0 },
{ "visible": false, "targets": 2 },
{ "visible": false, "targets": 3 }
],
"drawCallback": function() {
var api = this.api();
var rows = api.rows({page:'current'}).nodes();
var last=null;
api.column(2, {page:'current'}).data().each(function (especie, i) {
if (last !== especie) {
$(rows).eq(i).before(
'<tr class="especie info"><td colspan="4">'+especie+'</td></tr>'
);
last = especie;
}
});
$("#table_especie thead").remove();
$("#table_especie tfoot").remove();
}
});
var populateEspecieShowName = function(data) {
$('#animal_especie_name').text(data[0].name);
};
var populateEspecieTable = function(data) {
var animais = [];
$.each(data, function(id_animal, animal){
animais.push([
animal.id_animal,
animal.nome_animal + ': ' + '<br>' + animal.notas_animal,
animal.nome_animal.charAt(0).toUpperCase()
]);
});
$('#table_especie').dataTable().fnClearTable();
$('#table_especie').dataTable().fnAddData(animais);
$('#table_especie').dataTable().fnDraw();
};
$('#table_especie tbody').on('click', 'tr', function() {
var animalId = $('#table_especie').DataTable().row(this).data();
if (animalId !== undefined)
$.route('animal/' + animalId[0]);
});
$('#table_especie_search').keyup(function(){
$('#table_especie').DataTable().search($(this).val(), false, true).draw() ;
});
route.js
case 'especie_show':
setButton('left', template, 'especies', 'redirect', null);
setButton('right', template, 'especie/' + pathArray[1] + '/edit', 'redirect', null);
var params = 'filter=id_especie%3D' + pathArray[1] + '&fields=nome_especie';
$.api.getRecords('especie', params, getToken('token'), populateEspecieShowName);
params = 'filter=especie_id_especie%3D' + pathArray[1] + '&fields=nome_animal, notas_animal';
$.api.getRecords('animal', params, getToken('token'), populateEspecieTable);
break;
感谢大家的关注和帮助!
啊,真的吗?我有点想避免这种情况。我会尝试一下,谢谢。我认为arrayOfDogs是我的pathArray,对吧?我应该把它放在var populateEspecieTable = function(data)下的script.js中,对吧?第一个代码片段,你能告诉我我该把它放在哪里吗? –
@EduardaBuss [PART 1] arrayOfDogs是你的路径数组,如果setButton()函数是模板化网格/表格的函数。至于如何构建js,在AngularJS应用程序中,js的不同用途将(很可能)分解为不同的文件。例如:'factory.js'可能是从db/server请求数据并将其格式化为包含ArrayofDogs的对象的文件的名称。 'scripts.js'可以被重命名为'controller.js'(这真的没有关系),这将会在你调用db之后得到解决(这通常用promise模式处理) – Tamb
@EduardaBuss [PART 2 ]如果使用承诺感到不舒服,可以使用if/else语句来请求数据(确保处理错误),然后对其进行格式化,然后将其传递到模板函数中。 - 我会建议将其包含到函数/对象中以避免命名冲突。然后,您可以将代码分离出模块(可能是用于获取数据,用于模板等) - 实质上,这是AngularJS所做的。但是,如果您感觉更舒适,请查看“模块模式”并从那里开始。这就是我开始在JS :) – Tamb