== Code ==
Alles anzeigen
== Demo ==
demo.easy-coding.de/google-vis…on/paging-using-ajax.html
Quellcode
- <!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>
- Paging using AJAX (Google Visualization API)
- </title>
- <script type="text/javascript" src="http://www.google.com/jsapi"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
- <script type="text/javascript">
- google.load('visualization', '1', {packages: ['table']});
- </script>
- <script type="text/javascript">
- /**
- * draws the visualization, called via google.setOnLoadCallback
- */
- function drawVisualization() {
- // how many items should be visible per page
- var limit = 4;
- // preload one more page
- var firstload_entries = (limit*2);
- // set the first two pages as preloaded (index is important)
- var cachedpages = [1,1];
- // Create and populate the data table.
- var data = new google.visualization.DataTable();
- data.addColumn('string', 'Item');
- data.addColumn('number', 'Rating');
- data.addColumn('boolean', 'Check');
- // fill the first entries with sample data
- data.addRows(firstload_entries);
- for(var i=0; i<firstload_entries; i++) {
- data.setCell(i, 0, 'Item '+i);
- data.setCell(i, 1, i*i);
- data.setCell(i, 2, true);
- }
- // Create and draw the visualization.
- var visualization = new google.visualization.Table(document.getElementById('table'));
- google.visualization.events.addListener(visualization, 'page', function(e) {
- var next = e['page']+1;
- // preload next page if now existing yet
- if(typeof(cachedpages[next]) != 'undefined') return;
- // load data via json
- $.getJSON("status.php", {page:next, limit:limit}, function(jsondata){
- // specify the index where rows should be inserted
- data.insertRows(next*limit, limit);
- // insert data
- $.each(jsondata, function(i,item) {
- for(var j=0; j<item.length; j++) {
- data.setCell(parseInt(i), j, item[j]);
- }
- });
- // redraw the current page (activates the next button)
- visualization.draw(data, {page:'enable', pageSize: limit, startPage: e['page']});
- // save as cached
- cachedpages.push(1);
- });
- });
- visualization.draw(data, {page:'enable', pageSize: limit});
- }
- google.setOnLoadCallback(drawVisualization);
- </script>
- </head>
- <body style="font-family: Arial;border: 0 none;">
- <h1>Paging using AJAX</h1>
- <h2>Google Visualization API</h2>
- <p>Reloads additional data and appends it to the table</p>
- <a href="http://www.easy-coding.de">http://www.easy-coding.de</a>
- <div id="table"></div>
- </body>
- </html>
== Demo ==
demo.easy-coding.de/google-vis…on/paging-using-ajax.html
7.647 mal gelesen