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

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

            }

Here it's showing 1,2,3,4 instead of this I want initially 1,2 once click on 2 or next it should show next 3,4 and so on..

The problem is here if my data size is 100 then its showing 1,2,3,4,5,6,7,8,9,10, .... 100 So it's a problem. Could anyone please help me on this.

Answer 1

Use the pagingButtons configuration option. See docs

Example:

Run the following snippet that uses 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>