google.visualisation.DataTable（）定位分页div [英] google.visualisation.DataTable() positioning pagination div
问题描述
我在Google DataTable中拥有这些数据：
我想将页面按钮放在表格顶部。但在我看来，Google不支持这样做。有什么最好的方法，你们知道吗？
jsfiddle.net/Kwangsub_Ahn/ohh8397h/7/
这里是jsfiddle链接我正在尝试的内容。
HTML
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>
< div id =table_div>< / div>
JAVASCRIPT
google.load（visualization，1.1，{
packages：[table]
}）;
google.setOnLoadCallback（drawTable）;
函数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
}）;
/ strong>没有任何标准选项可以设置， 但您可以手动移动按钮行， 图表的 2）
'准备好'和'页面'事件触发
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]）;
}
'sort'和'页面'事件之后将按钮移回底部...
使用 moveButtons 用于'页面' event works fine，
但需要处理'sort'不同于
- 如果您不希望排序，只需设置以下选项，并且不要附加事件...
- ，但您仍然需要设置上述选项 -
，但是您还必须手动处理排序表
$
sort：'event' <如果您希望允许排序，则可以使用ul>
sort：'event'
google.visualization.events.addListener（table，'sort'，sortTable）;
函数sortTable（sortOptions）{
data.sort（[{
列：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）;函数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>< / div>< / code&
根据 loader.js （vs
jsapi ）。 //developers.google.com/chart/interactive/docs/release_notesrel =nofollow noreferrer>发布说明 ...
通过
jsapi加载器保持可用的Google Charts的版本不再一致地更新。请从现在开始使用新的gstaticloader.js。
这只会改变加载语句，请参阅上面的代码片段...
I have this data in a Google DataTable:
And I want to position the page buttons on top of the table. But it seems to me Google doesn't support to do this. Is there any best approach do you guys know?
HERE IS jsfiddle link what I am trying now.
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
});
}
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
jsapiloader is no longer being updated consistently. Please use the new gstaticloader.jsfrom now on.
this will only change the load statement, see above snippet...
这篇关于google.visualisation.DataTable（）定位分页div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
