Menampilkan data tertentu dari beberapa jenis data akan memudahkan orang lain yang membaca data cepat mengerti dan memahami pesan yang disampaikan. Filter data yang diperkenalkan ini adalah cara menfilter atau hanya menampilkan beberapa baris data dari konten tabel database yang ada di dalamnya.
Menentukan jumlah tabel yang ingin ditampilkan
Tabel yang terlihat di atas merupakan hasil dari kode di atas. Jika ingin membuat tabel seperti di atas dapat meng-copy kode di bawah ini. Sementara cara membuat dan menulis kode tabel dapat mengikuti artikel Cara Membuat Tabel Database Online
<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:'Nama',type:'string'},
{id:'B',label:'Tinggi',type:'number'},
{id:'C',label:'Datang',type:'boolean'},
{id:'D',label:'Waktu',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>
<div style="background-color: buttonface; border: 1px solid gray; margin-bottom: 10px; padding: 5px;">
Menentukan jumlah tabel yang ingin ditampilkan
<form action="">
<span style="font-size: 12px;">Banyak baris:</span>
<select onchange="setNumberOfPages(this.value)" style="font-size: 12px;">
<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="font-size: 12px; padding-left: 5px;">Mengatur simbol halaman </span>
<input checked="checked" onclick="setCustomPagingButtons(this.checked)" type="checkbox" />
<span style="font-size: 12px; padding-left: 5px;">Menentukan menampilkan atau tidak</span>
<select id="enable-paging-buttons" onchange="setPagingButtonsConfiguration(this.value)" style="font-size: 12px;">
<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>
Keterangan:
{c:[{v:'Dave'},{v:159.0,f:'159'},{v:true,f:'TRUE'},{v:[12,25,0,0],f:'12:25:00'}]}, adalah data baris dan kolom tabel
Sumber: Google Code Playground
Sumber: Google Code Playground
