javascript - google.visualization.DataTable() 定位分页div

Question

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

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

这是我现在正在尝试的 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)没有任何可以设置的标准选项，

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

当图表的 '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'

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

排序:'事件'

• 如果您想要允许排序，您仍需要设置上述选项，
  但您还必须手动对表格进行排序

排序:'事件'

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>

<小时/>

注意:根据release notes，建议使用较新的库loader.js(相对于jsapi)。 ...

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 语句，请参阅上面的代码片段...