[英]Tablesorter not loaded with dynamically generated content
我正在尝试在cartodb.js生成的自定义信息窗口中加载jQuery tablesorter。 这个想法是,当我单击地图上的数据点时,将打开一个信息窗口,从数据库动态加载数据。 当信息正确加载并显示为普通表时,表排序器未加载。
相关代码:
<script>
$(document).ready(function()
{
$("#bewohner").tablesorter();
}
);
</script>
<script type="infowindow/html" id="infowindow_template">
<div class="infowindow-custom">
<a href="#close" class="cartodb-tooltip-close-button close">x</a>
<div class="cartodb-tooltip-content-wrapper">
<div class="cartodb-tooltip-content" style="padding:2px">
<div id="strasse"></div>
<table id="bewohner" class='tablesorter table table-condensed'>
<thead>
<tr>
<th>
<th>Familienname
<th>Vorname
<th>Beruf</th>
<th>Etage</th>
<th>Tel.</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="cartodb-tooltip-container"></div>
</div>
</script>
....
cartodb.createLayer(map, layerUrl, layerOptions)
.addTo(map)
.on('done', function(layer) {
var infowindow = layer.getSubLayer(0).infowindow
infowindow.set('template', function(data) {
var clickPosLatLng = this.model.get('latlng');
var fields = this.model.get('content').fields;
if (fields && fields[0].type !== 'loading') {
var obj = _.find(fields, function(obj) {
return obj.title == 'strasse_original'
}).value
} // end test of status
$.get("http://******.cartodb.com/api/v1/sql?q=select * from vauban_1 where strasse_original= '" + obj + "' ORDER BY etage, familienname ASC", function(data) {
$('#strasse').append("<h4>" + data.rows[0].strasse_heute + " / " + data.rows[0].strasse_original +"</h4>");
for (var i = 0; i < data.total_rows; i++) {
$('#bewohner tbody').append("<tr><td>" + data.rows[i].zusatz + "<td>" + data.rows[i].familienname + "<td>" + data.rows[i].vorname + "<td>" + data.rows[i].beruf + "<td>" + data.rows[i].etage + "<td>" + data.rows[i].telefon + "</td></tr>");
}
});
return $('#infowindow_template').html();
});
})
看来每次加载信息窗口时,我都必须以某种方式触发表排序器,但是我不知道如何。
我对tablesorter的调用未正确放置,因为它必须放置在更新信息窗口的函数中。 因此,该功能的有效版本为:
cartodb.createLayer(map, layerUrl, layerOptions)
.addTo(map)
.on('done', function(layer) {
var infowindow = layer.getSubLayer(0).infowindow
infowindow.set('template', function(data) {
var clickPosLatLng = this.model.get('latlng');
var fields = this.model.get('content').fields;
if (fields && fields[0].type !== 'loading') {
var obj = _.find(fields, function(obj) {
return obj.title == 'strasse_original'
}).value
} // end test of status
$.get("http://******.cartodb.com/api/v1/sql?q=select * from vauban_1 where strasse_original= '" + obj + "' ORDER BY etage, familienname ASC", function(data) {
$('#strasse').append("<h4>" + data.rows[0].strasse_heute + " / " + data.rows[0].strasse_original +"</h4>");
for (var i = 0; i < data.total_rows; i++) {
$('#bewohner tbody').append("<tr><td>" + data.rows[i].zusatz + "<td>" + data.rows[i].familienname + "<td>" + data.rows[i].vorname + "<td>" + data.rows[i].beruf + "<td>" + data.rows[i].etage + "<td>" + data.rows[i].telefon + "</td></tr>");
}
$("#bewohner").tablesorter();
});
return $('#infowindow_template').html();
});
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.