Question

Using Google Chart Tools with a code like this:

<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>

It causes a weird issue while paging. Having 38 counties, each page shows:

• #1 – 10 countries (from 1 to 10)
• #2 – 28 countries (from 11 to 38)
• #3 – 18 countries. Somehow, although the second page already listed the rest of the countries, there is a third page that lists countries from 21 to 38, again
• #4 – 8 countries (from 31 to 38), that were already listed

JSFIDDLE http://jsfiddle.net/HT3St/

I tested the code also on Code Playground and the same issue happened. Is this some known bug that I don’t know?

Answer 1

I had the same problem and I’ve found how to resolve this, I enforce the option again and it resolves the bug:

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

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

Try it 🙂