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 に答える