分页表时出现 Google Charts API 问题答案

【问题标题】：Issue with Google Charts API while paging table分页表时出现 Google Charts API 问题
【发布时间】：2012-12-21 16:09:42
【问题描述】：

将Google Chart Tools 与这样的代码一起使用：

<div id='table_div'></div>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawTable);
function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Country');
  data.addColumn('number', 'A');
  data.addColumn('number', 'B');
  data.addColumn('number', 'Total');
  data.addRows([
      ['United States',     19, 115, 134],
      ['United Kingdom',     3,  23,  26],
      ['Germany',            2,  19,  21],
      ['Ireland',            0,   3,   3],
      ['Belgium',            2,   3,   5],
      ['Russian Federation', 0,   2,   2],
        ...
  ]);

  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data, {showRowNumber: true, page: 'enable', pageSize: '10', sortColumn: 3, sortAscending: false});
}
</script>

它在分页时会导致一个奇怪的问题。有 38 个县，每页显示：

#1 - 10 个国家/地区（从 1 到 10）
#2 - 28 个国家（从 11 到 38）
#3 - 18 个国家。不知何故，虽然第二页已经列出了其他国家，但第三页再次列出了从 21 到 38 的国家
#4 - 8 个国家（从 31 到 38），已列出

JSFIDDLE http://jsfiddle.net/HT3St/

我也在Code Playground 上测试了代码，同样的问题发生了。这是我不知道的一些已知错误吗？

【问题讨论】：

如果你使用arrayToDataTable而不是DataTable，会出现同样的错误吗？
是的，同样的错误发生了。

标签： javascript google-visualization

【解决方案1】：

{showRowNumber: true, 
 page: 'enable', 
 pageSize: '10', 
 sortColumn: 3, 
 sortAscending: false
}

您的 pageSize 已设置为字符串。注意 10 周围的引号。它必须是这样的数字

pageSize: 10,

【讨论】：

【解决方案2】：

我遇到了同样的问题，我找到了解决方法，我再次强制执行该选项并解决了错误：

 var options = {
   alternatingRowStyle:[true],
   pageSize:[20],
   page:['enable']
    };

  options['pageSize'] = 20; <- This line fix the problem.

试试看:)

【讨论】：