javascript - 如何在点击最后一页后最初只显示两页下一页页码应显示在谷歌图表数据表中

Question

         google.charts.load('current', {
                'packages': ['table']
            });
            google.charts.setOnLoadCallback(drawTable);

            function drawTable() {
                var dataTable = new google.visualization.DataTable();

                // determine the number of rows and columns.
                var numRows = newData.length;
                var numCols = newData[0].length;

                dataTable.addColumn('string', newData[0][0]);

                for (var i = 1; i < numCols; i++)
                    dataTable.addColumn('string', newData[0][i]);

                // now add the rows.
                for (var i = 1; i < numRows; i++)
                    dataTable.addRow(newData[i]);

                
                var cssClassNames = {
                    'tableRow': 'gold-border',
                    'oddTableRow': 'beige-background',
                    'headerCell': 'gold-border',
                    'tableCell': 'gold-border'
                };

                var options = {
                    showRowNumber: false,
                    width: '100%',
                    height: '100%',
                    page: 'disable',
                    pageSize: 1,
                    allowHtml: true,
                    pagingSymbols: {
                        prev: 'Prev',
                        next: 'Next'
                    },
                    'cssClassNames': cssClassNames,
                    pagingButtonsConfiguration: 'auto'
                };
                
                

                // redraw the chart.
                var chart = new google.visualization.Table(document.getElementById('gauge_div'));
                chart.draw(dataTable, options);

            }

这里显示的是1,2,3,4而不是这个我想要最初的1,2一旦点击2或下一个它应该显示下一个3,4等等..

问题就在这里，如果我的数据大小是 100，那么它显示1,2,3,4,5,6,7,8,9,10, .... 100 所以这是个问题。谁能帮我解决这个问题。

Answer 1

使用pagingButtons配置选项。查看文档

例子：

运行以下使用的代码段pagingButtons:2：

google.charts.load('current', {
  'packages': ['table']
});
google.charts.setOnLoadCallback(drawTable);

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time Employee');
  data.addRows([
    ['Mike', { v: 10000, f: '$10,000' }, true],
    ['Jim', { v: 8000, f: '$8,000' }, false],
    ['Alice', { v: 12500, f: '$12,500' }, true],
    ['Bob', { v: 7000, f: '$7,000' }, true]
  ]);

  var table = new google.visualization.Table(document.getElementById('table_div'));
  var options = {
    showRowNumber: true,
    width: '100%',
    height: '100%',
    page: 'enable',
    pageSize: 1,
    pagingButtons: 2
  }
  table.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>