google 可视化 API 数据 table 的分页不起作用

Question

我已经在单击地图中的标记时将 google 可视化 table 到信息窗口的内容中。

但是，现在我正在尝试使用以下代码为已包含在 infowindow 中的 table 添加分页。

this.draw = function() {
    this.table.draw(this.dT, {
        allowHtml: true, 
        showRowNumber: true, 
        cssClassNames: cssClass,
        page : 'enable',
        pageSize : 4,
        pagingSymbols: {
            prev: 'Previous',
            next: 'Next'
        }
    });
}

分页符号出现在 table 中，但无论何时单击，分页都不起作用。

不知道是bug还是地图只支持这个功能api v3.

更新：

<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
var cssClass = {rowNumberCell: 'rowNumberCellClass'};

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('string', 'Place');
  data.addRows(4);
  data.setCell(0, 0, 'John');
  data.setCell(1, 0, 'Sam');
  data.setCell(2, 0, 'Andreson');
  data.setCell(3, 0, 'Cody');

  data.setCell(0, 1, 'Stockholm');
  data.setCell(1, 1, 'Dubai');   
  data.setCell(2, 1, 'India');
  data.setCell(3, 1, 'Australia');

  visualization = new google.visualization.Table(document.getElementById('tableContainer'));

  visualization.draw(data, {
    allowHtml: true, 
    showRowNumber: true, 
    cssClassNames: cssClass,
    page : 'enable',
    pageSize : 2,
    pagingSymbols: {
    prev: 'Previous',
    next: 'Next'
},

});

 }  
 google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="tableContainer"></div>
</body>
</html>

Answer 1

不清楚你是如何组合地图和 table-图表的，对我来说，当我组合它们时没有问题。

我看到的唯一问题是您在第一个代码段中使用了 pageSize : 4 ，但是当您尝试使用与第二个代码段中所示相同的数据时，分页按钮（ table)

中只有 4 行

但是，一个工作示例（添加了一些基于标记位置的过滤，也许这是您的最终目标）

google.load('visualization', '1', {packages: ['table']});
google.load('maps', '3', {callback: function(){
  
  var cssClass = {rowNumberCell: 'rowNumberCellClass'},
      places= {
                Stockholm:  new google.maps.LatLng( 59.329, 18.068),
                India:      new google.maps.LatLng( 20.593, 78.962),
                Dubai:      new google.maps.LatLng( 25.204, 55.270),
                Australia:  new google.maps.LatLng(-25.274, 133.775)                
              };

  function drawVisualization(node,place) {
    //initialize data and chart 
    if(!node.chart){
      node.chart = {
                     table: new google.visualization.Table(node),
                     data:  new google.visualization.DataTable(),
                     options:{
                              allowHtml:      true, 
                              showRowNumber:  true, 
                              cssClassNames:  cssClass,
                              page:           'enable',
                              pageSize:       1,
                              pagingSymbols: {
                                                prev: 'Previous',
                                                next: 'Next'
                                             }
                            }
                    };
      node.chart.data.addColumn('string', 'Name');
      node.chart.data.addColumn('string', 'Place');
      node.chart.data.addRows([
                                ['Bart'       ,'Stockholm'],
                                ['Marge'      ,'Stockholm'],
                                ['Homer'      ,'Stockholm'],
                                ['John-Boy'   ,'Dubai'],
                                ['Jim-Bob'    ,'Dubai'],
                                ['Jason'      ,'Dubai'],
                                ['Charlie'    ,'India'],
                                ['Alan'       ,'India'],
                                ['Rose'       ,'India'],
                                ['Sheldon'    ,'Australia'],                                
                                ['Penny'      ,'Australia'],                                
                                ['Howard'     ,'Australia']
                              ]);
      node.chart.view = new google.visualization.DataView(node.chart.data);
    }
    
    //draw table
    if(place){//filter the rows when place-argument has been provided 
      node.chart.view.setRows(node.chart.data.getFilteredRows([{column: 1, 
                                                                value: place}]));
      node.chart.table.draw(node.chart.view, node.chart.options);
    }
    else{
      node.chart.table.draw(node.chart.data, node.chart.options);
    }
  }    
  
  var map     = new google.maps.Map(document.getElementById('map-canvas'),
                                    {zoom:1,center:{lat:0,lng:0}})
      //the node where the table will be drawn
      table   = document.createElement('div'),
      //infowindow
      infowin = new google.maps.InfoWindow({content:table});
      table.setAttribute('id','tableContainer');
  
      
  google.maps.event.addListener(infowin,'domready',function(){
    drawVisualization(this.getContent(),this.get('placename'));
  });
  
  //create some markers
  for(var k in places){
    (function(place,latlng){
      var marker  = new google.maps.Marker({map:map,
                                            position:latlng,
                                            placename:place});
      
      google.maps.event.addListener(marker,'click',function(){
        infowin.set('placename',this.get('placename'));
        infowin.open(map,marker);
      });
    }(k,places[k]));
  }
}});

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map-canvas"></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

google 可视化 API 数据 table 的分页不起作用

Pagination for google visualization API data table is not working

google-maps-api-3

data-visualization