【问题标题】:How to show initially only two page once click on last page next page number should show in google chart datatable如何在点击最后一页后最初只显示两页下一页页码应显示在谷歌图表数据表中
【发布时间】:2021-05-06 05:59:24
【问题描述】:
         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 所以这是个问题。 谁能帮我解决这个问题。

【问题讨论】:

    标签: javascript jquery google-visualization google-chat google-datatable


    【解决方案1】:

    使用pagingButtons 配置选项。见docs

    示例:

    运行以下使用pagingButtons:2 的sn-p:

    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>

    【讨论】:

      猜你喜欢
      • 2021-01-18
      • 2013-03-30
      • 1970-01-01
      • 2019-06-29
      • 2018-10-03
      • 2017-12-17
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多