单击最后一页后如何最初仅显示两页，下一页应显示在 google 图表数据表中

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 或 next 它应该显示下一个 3,4 等等..

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

Answer 1

使用pagingButtons 配置选项。参见 docs

示例：

运行以下代码段使用了 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: ',000' }, true],
    ['Jim', { v: 8000, f: ',000' }, false],
    ['Alice', { v: 12500, f: ',500' }, true],
    ['Bob', { v: 7000, f: ',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>

单击最后一页后如何最初仅显示两页，下一页应显示在 google 图表数据表中

How to show initially only two page once click on last page next page number should show in google chart datatable

javascript

jquery

google-visualization

google-datatable

google-chat

示例：