google.visualisation.DataTable()定位分页div

Question

我在 Google 数据表中有此数据：

我想将页面按钮放在 table 的顶部。但在我看来 Google 不支持这样做。大家知道有什么好的方法吗？

这是 jsfiddle link 我正在尝试的。

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) 没有任何标准选项可以设置，

但您可以手动移动按钮行，

当图表的 'ready' 和 'page' 事件触发时

    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) 图表将在 'sort' 和 'page' 事件后将按钮移回底部...

对 'page' 事件使用 moveButtons 效果很好，

但需要以不同的方式处理 'sort'

如果您不想允许排序，只需设置以下选项，并且不要附加事件...

sort: 'event'

如果你想要允许排序，你仍然需要设置上面的选项，
但您还必须处理手动排序 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);
}

请参阅以下工作片段...

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>

注意：建议使用较新的库loader.js（对比jsapi），根据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.

这只会更改 load 语句，请参阅上面的代码片段...

google.visualisation.DataTable()定位分页div

google.visualisation.DataTable() positioning pagination div

javascript

datatable

visualization

google-visualization