0

我正在尝试在由 cartodb.js 生成的自定义信息窗口中加载 jQuery 表排序器。这个想法是，当我单击地图上的数据点时，将打开一个信息窗口，从数据库中动态加载数据。虽然信息已正确加载并显示为普通表格，但未加载表格排序器。

相关代码：

<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();
      });
  })

似乎每次加载信息窗口时我都必须以某种方式触发表格排序器，但我不知道如何。

4

1 回答 1

1

我对 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();
  });
})
于 2014-12-27T11:14:46.543 回答