Table paging by default
1,127 views
Skip to first unread message
TiKaY
Jan 7, 2011, 11:34:45 AM1/7/11
to Google Visualization API
Hi, I am currently working on this table chart, and i wanted to know
if it can show 10 rows by default (if i have 2000 rows) for example.
In other words, if I refresh the page, it shows 10 rows instead of
2000 and has the next/previous buttons.
Here is the basic code :
<!--
You are free to copy and use this sample in accordance with the terms
of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
var visualization;
var data;
var options = {'showRowNumber': true};
function drawVisualization() {
// Create and populate the data table.
var dataAsJson =
{cols:[
{id:'A',label:'Name',type:'string'},
{id:'B',label:'Height',type:'number'},
{id:'C',label:'Coming',type:'boolean'},
{id:'D',label:'Time',type:'timeofday'}],
rows:[
{c:[{v:'Dave'},{v:159.0,f:'159'},{v:true,f:'TRUE'},{v:
[12,25,0,0],f:'12:25:00'}]},
{c:[{v:'Peter'},{v:185.0,f:'185'},{v:false,f:'FALSE'},{v:
[13,15,0,0],f:'13:15:00'}]},
{c:[{v:'John'},{v:145.0,f:'145'},{v:true,f:'TRUE'},{v:
[15,45,0,0],f:'15:45:00'}]},
{c:[{v:'Moshes'},{v:198.0,f:'198'},{v:true,f:'TRUE'},{v:
[16,32,0,0],f:'16:32:00'}]},
{c:[{v:'Karen'},{v:169.0,f:'169'},{v:true,f:'TRUE'},{v:
[19,50,0,0],f:'19:50:00'}]},
{c:[{v:'Phil'},{v:169.0,f:'169'},{v:false,f:'FALSE'},{v:
[18,10,0,0],f:'18:10:00'}]},
{c:[{v:'Gori'},{v:159.0,f:'159'},{v:true,f:'TRUE'},{v:
[13,15,0,0],f:'13:15:00'}]},
{c:[{v:'Bill'},{v:155.0,f:'155'},{v:false,f:'FALSE'},{v:
[7,40,48,0],f:'7:40:48'}]},
{c:[{v:'Valery'},{v:199.0,f:'199'},{v:true,f:'TRUE'},{v:
[6,0,0,0],f:'6:00:00'}]},
{c:[{v:'Joey'},{v:187.0,f:'187'},{v:true,f:'TRUE'},{v:
[5,2,24,0],f:'5:02:24'}]},
{c:[{v:'Karen'},{v:190.0,f:'190'},{v:true,f:'TRUE'},{v:
[6,14,24,0],f:'6:14:24'}]},
{c:[{v:'Jin'},{v:169.0,f:'169'},{v:false,f:'FALSE'},{v:
[5,45,36,0],f:'5:45:36'}]},
{c:[{v:'Gili'},{v:178.0,f:'178'},{v:true,f:'TRUE'},{v:
[6,43,12,0],f:'6:43:12'}]},
{c:[{v:'Harry'},{v:172.0,f:'172'},{v:false,f:'FALSE'},{v:
[6,14,24,0],f:'6:14:24'}]},
{c:[{v:'Handerson'},{v:175.0,f:'175'},{v:true,f:'TRUE'},{v:
[6,57,36,0],f:'6:57:36'}]},
{c:[{v:'Vornoy'},{v:170.0,f:'170'},{v:true,f:'TRUE'},{v:
[13,12,0,0],f:'13:12:00'}]}]};
data = new google.visualization.DataTable(dataAsJson);
// Set paging configuration options
// Note: these options are changed by the UI controls in the
example.
options['page'] = 'enable';
options['pageSize'] = 10;
options['pagingSymbols'] = {prev: 'prev', next: 'next'};
options['pagingButtonsConfiguration'] = 'auto';
// Create and draw the visualization.
visualization = new
google.visualization.Table(document.getElementById('table'));
draw();
}
function draw() {
visualization.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
// sets the number of pages according to the user selection.
function setNumberOfPages(value) {
if (value) {
options['pageSize'] = parseInt(value, 10);
options['page'] = 'enable';
} else {
options['pageSize'] = null;
options['page'] = null;
}
draw();
}
// Sets custom paging symbols "Prev"/"Next"
function setCustomPagingButtons(toSet) {
options['pagingSymbols'] = toSet ? {next: 'next', prev:
'prev'} : null;
draw();
}
function setPagingButtonsConfiguration(value) {
options['pagingButtonsConfiguration'] = value;
draw();
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div style="margin-bottom: 10px; padding: 5px; border: 1px solid
gray; background-color: buttonface;">
<span> Configure the paging options in the table</span><br />
<form action="">
<span style="font-size: 12px;">Number of rows:</span>
<select style="font-size: 12px"
onchange="setNumberOfPages(this.value)">
<option value="">No paging</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="9">9</option>
<option selected="selected" value="10">10</option>
<option value="100">100</option>
</select>
<span style="padding-left: 5px; font-size: 12px;">Custom
paging symbols </span>
<input type="checkbox" checked="checked"
onclick="setCustomPagingButtons(this.checked)">
<span style="padding-left: 5px; font-size: 12px">Configure
buttons enabled/disabled</span>
<select style="font-size: 12px" id='enable-paging-buttons'
onchange='setPagingButtonsConfiguration(this.value)'>
<option value=''>Default (auto)</option>
<option value='prev'>prev</option>
<option value='next'>next</option>
<option value='both'>both</option>
</select>
</form>
</div>
<div id="table"></div>
</body>
</html>
What do I have to change in it?
if it can show 10 rows by default (if i have 2000 rows) for example.
In other words, if I refresh the page, it shows 10 rows instead of
2000 and has the next/previous buttons.
Here is the basic code :
<!--
You are free to copy and use this sample in accordance with the terms
of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
var visualization;
var data;
var options = {'showRowNumber': true};
function drawVisualization() {
// Create and populate the data table.
var dataAsJson =
{cols:[
{id:'A',label:'Name',type:'string'},
{id:'B',label:'Height',type:'number'},
{id:'C',label:'Coming',type:'boolean'},
{id:'D',label:'Time',type:'timeofday'}],
rows:[
{c:[{v:'Dave'},{v:159.0,f:'159'},{v:true,f:'TRUE'},{v:
[12,25,0,0],f:'12:25:00'}]},
{c:[{v:'Peter'},{v:185.0,f:'185'},{v:false,f:'FALSE'},{v:
[13,15,0,0],f:'13:15:00'}]},
{c:[{v:'John'},{v:145.0,f:'145'},{v:true,f:'TRUE'},{v:
[15,45,0,0],f:'15:45:00'}]},
{c:[{v:'Moshes'},{v:198.0,f:'198'},{v:true,f:'TRUE'},{v:
[16,32,0,0],f:'16:32:00'}]},
{c:[{v:'Karen'},{v:169.0,f:'169'},{v:true,f:'TRUE'},{v:
[19,50,0,0],f:'19:50:00'}]},
{c:[{v:'Phil'},{v:169.0,f:'169'},{v:false,f:'FALSE'},{v:
[18,10,0,0],f:'18:10:00'}]},
{c:[{v:'Gori'},{v:159.0,f:'159'},{v:true,f:'TRUE'},{v:
[13,15,0,0],f:'13:15:00'}]},
{c:[{v:'Bill'},{v:155.0,f:'155'},{v:false,f:'FALSE'},{v:
[7,40,48,0],f:'7:40:48'}]},
{c:[{v:'Valery'},{v:199.0,f:'199'},{v:true,f:'TRUE'},{v:
[6,0,0,0],f:'6:00:00'}]},
{c:[{v:'Joey'},{v:187.0,f:'187'},{v:true,f:'TRUE'},{v:
[5,2,24,0],f:'5:02:24'}]},
{c:[{v:'Karen'},{v:190.0,f:'190'},{v:true,f:'TRUE'},{v:
[6,14,24,0],f:'6:14:24'}]},
{c:[{v:'Jin'},{v:169.0,f:'169'},{v:false,f:'FALSE'},{v:
[5,45,36,0],f:'5:45:36'}]},
{c:[{v:'Gili'},{v:178.0,f:'178'},{v:true,f:'TRUE'},{v:
[6,43,12,0],f:'6:43:12'}]},
{c:[{v:'Harry'},{v:172.0,f:'172'},{v:false,f:'FALSE'},{v:
[6,14,24,0],f:'6:14:24'}]},
{c:[{v:'Handerson'},{v:175.0,f:'175'},{v:true,f:'TRUE'},{v:
[6,57,36,0],f:'6:57:36'}]},
{c:[{v:'Vornoy'},{v:170.0,f:'170'},{v:true,f:'TRUE'},{v:
[13,12,0,0],f:'13:12:00'}]}]};
data = new google.visualization.DataTable(dataAsJson);
// Set paging configuration options
// Note: these options are changed by the UI controls in the
example.
options['page'] = 'enable';
options['pageSize'] = 10;
options['pagingSymbols'] = {prev: 'prev', next: 'next'};
options['pagingButtonsConfiguration'] = 'auto';
// Create and draw the visualization.
visualization = new
google.visualization.Table(document.getElementById('table'));
draw();
}
function draw() {
visualization.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
// sets the number of pages according to the user selection.
function setNumberOfPages(value) {
if (value) {
options['pageSize'] = parseInt(value, 10);
options['page'] = 'enable';
} else {
options['pageSize'] = null;
options['page'] = null;
}
draw();
}
// Sets custom paging symbols "Prev"/"Next"
function setCustomPagingButtons(toSet) {
options['pagingSymbols'] = toSet ? {next: 'next', prev:
'prev'} : null;
draw();
}
function setPagingButtonsConfiguration(value) {
options['pagingButtonsConfiguration'] = value;
draw();
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div style="margin-bottom: 10px; padding: 5px; border: 1px solid
gray; background-color: buttonface;">
<span> Configure the paging options in the table</span><br />
<form action="">
<span style="font-size: 12px;">Number of rows:</span>
<select style="font-size: 12px"
onchange="setNumberOfPages(this.value)">
<option value="">No paging</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="9">9</option>
<option selected="selected" value="10">10</option>
<option value="100">100</option>
</select>
<span style="padding-left: 5px; font-size: 12px;">Custom
paging symbols </span>
<input type="checkbox" checked="checked"
onclick="setCustomPagingButtons(this.checked)">
<span style="padding-left: 5px; font-size: 12px">Configure
buttons enabled/disabled</span>
<select style="font-size: 12px" id='enable-paging-buttons'
onchange='setPagingButtonsConfiguration(this.value)'>
<option value=''>Default (auto)</option>
<option value='prev'>prev</option>
<option value='next'>next</option>
<option value='both'>both</option>
</select>
</form>
</div>
<div id="table"></div>
</body>
</html>
What do I have to change in it?
ChartALot
Jan 9, 2011, 6:09:30 AM1/9/11
to google-visua...@googlegroups.com
Dear TiKaY,
I think that the documentation of the Table visualization is clear. Specifically, please advise the documentation about "page" and "pageSize" options.
Your example seems to work very well, I don't see the issue that you are trying to solve.
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
Reply all
Reply to author
Forward
0 new messages