Question

我在Google DataTable中有这些数据：

我想将页面按钮放在桌面上。但在我看来谷歌并不支持这样做。你们知道有什么最好的方法吗？

这里是jsfiddle链接，我现在正在尝试。

jsfiddle.net/Kwangsub_Ahn/ohh8397h/7/

HTML
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>

JAVASCRIPT
google.load("visualization", "1.1", {
    packages: ["table"]
});
google.setOnLoadCallback(drawTable);

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Date');
    data.addColumn('string', 'Project');
    data.addColumn('string', 'System');
    data.addColumn('number', 'No');
    data.addRows([
        ['7/31/2014', 'project1', 'system1', 5],
        ['5/2/2014', 'project2', 'system2', 2],
        ['5/2/2014', 'project1', 'system1', 5],
        ['1/31/2014', 'project3', 'system4', 1]
   ]);

    var view = new google.visualization.DataView(data);

    var id = document.getElementById('table_div');
    var table = new google.visualization.Table(id);

    table.draw(view, {
        allowHtml: true,
        width: '100%',
        height: '100%',
        page: 'enable',
        pageSize: 10
    });
}

Answer 1

1) there aren't any standard options you can set,

but you can move the button row manually,

when the chart's 'ready' and 'page' events fire

    google.visualization.events.addListener(table, 'ready', moveButtons);
    google.visualization.events.addListener(table, 'page', moveButtons);

    function moveButtons() {
      var content = id.children[0].children[1];
      var parent = content.parentNode;
      parent.insertBefore(content, parent.children[0]);
    }

2) the chart will move the buttons back to the bottom after the 'sort' and 'page' events...

using moveButtons for the 'page' event works fine,

but need to handle 'sort' differently

if you don't want to allow sorting, simply set the following option, and don't attach an event...

sort: 'event'

if you want to allow sorting, you'll still need to set the above option,
but you'll also have to handle manually sorting the table

sort: 'event'

google.visualization.events.addListener(table, 'sort', sortTable);

function sortTable(sortOptions) {
  data.sort([{
    column: sortOptions.column,
    desc: !sortOptions.ascending
  }]);

  options.sortColumn = sortOptions.column;
  options.sortAscending = sortOptions.ascending;

  table.draw(data, options);
}

see following working snippet...

google.charts.load('current', {
  callback: drawTable,
  packages: ['table']
});

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Date');
    data.addColumn('string', 'Project');
    data.addColumn('string', 'System');
    data.addColumn('number', 'No');
    data.addRows([
        ['7/31/2014', 'project1', 'system1', 5],
        ['5/2/2014', 'project2', 'system2', 2],
        ['5/2/2014', 'project1', 'system1', 5],
        ['1/31/2014', 'project3', 'system4', 1]
    ]);

    var options = {
        allowHtml: true,
        width: '100%',
        height: '100%',
        page: 'enable',
        pageSize: 2,
        sort: 'event'
    };


    var id = document.getElementById('table_div');
    var table = new google.visualization.Table(id);

    google.visualization.events.addListener(table, 'ready', moveButtons);
    google.visualization.events.addListener(table, 'page', moveButtons);

    function moveButtons() {
      var content = id.children[0].children[1];
      var parent = content.parentNode;
      parent.insertBefore(content, parent.children[0]);
    }

    google.visualization.events.addListener(table, 'sort', sortTable);

    function sortTable(sortOptions) {
      data.sort([{
        column: sortOptions.column,
        desc: !sortOptions.ascending
      }]);

      options.sortColumn = sortOptions.column;
      options.sortAscending = sortOptions.ascending;

      table.draw(data, options);
    }

    table.draw(data, options);
}

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

note: recommend using the newer library loader.js (vs. jsapi), according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.

this will only change the load statement, see above snippet...

google.visualisation.DataTable（）定位分页div

1 个答案: