Pagination mit AJAX und mehreren Visualisierungen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • == Code ==

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    5. <title>
    6. Paging using AJAX with refresh of Chart (Google Visualization API)
    7. </title>
    8. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    9. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    10. <script type="text/javascript">
    11. google.load('visualization', '1', {packages: ['table','barchart']});
    12. </script>
    14. <script type="text/javascript">
    15. /**
    16. * draw partly
    17. *
    18. * @param visualisation ob can be type of google.visualization.BarChart
    19. * @param DataTable data the original full data
    20. * @param DataTable datacopy a reference with existing columns and a fixed row length
    21. * @param integer offset data offset
    22. * @param integer limit data limit
    23. */
    24. function drawPartly(ob, data, datacopy, offset, limit) {
    25. var columns = data.getNumberOfColumns();
    27. // reset the datacopy (important, if switching from empty to full page)
    28. datacopy.removeRows(0,datacopy.getNumberOfRows());
    30. for(var i=offset; i<offset+limit && i<data.getNumberOfRows(); i++) {
    31. // insert new row
    32. var k = datacopy.addRow();
    34. // fill columns
    35. for(var j=0; j<columns; j++) {
    36. datacopy.setCell(k, j, data.getValue(i,j));
    37. }
    38. }
    39. ob.draw(datacopy);
    40. }
    42. /**
    43. * draws the visualization, called via google.setOnLoadCallback
    44. */
    45. function drawVisualization() {
    46. // how many items should be visible per page
    47. var limit = 4;
    49. // preload one more page
    50. var firstload_entries = (limit*2);
    52. // set the first two pages as preloaded (index is important)
    53. var cachedpages = [1,1];
    55. // Create and populate the data table.
    56. var data = new google.visualization.DataTable();
    57. data.addColumn('string', 'Item');
    58. data.addColumn('number', 'Rating');
    59. data.addColumn('boolean', 'Check');
    61. // construct the (global) data copy
    62. var datacopy = data.clone();
    63. // the copy will never hold more entries than one page can display
    64. datacopy.insertRows(0, limit);
    66. // fill the first entries with sample data
    67. data.addRows(firstload_entries);
    68. for(var i=0; i<firstload_entries; i++) {
    69. data.setCell(i, 0, 'Item '+i);
    70. data.setCell(i, 1, i*i);
    71. data.setCell(i, 2, true);
    72. }
    74. // Create and draw the visualization.
    75. var visualization = new google.visualization.Table(document.getElementById('table'));
    76. google.visualization.events.addListener(visualization, 'page', function(e) {
    77. var next = e['page']+1;
    79. // update the chart
    80. drawPartly(chart, data, datacopy, e['page']*limit, limit);
    82. // preload next page if now existing yet
    83. if(typeof(cachedpages[next]) != 'undefined') return;
    85. // load data via json
    86. $.getJSON("status.php", {page:next, limit:limit}, function(jsondata){
    87. // specify the index where rows should be inserted
    88. data.insertRows(next*limit, limit);
    90. // insert data
    91. $.each(jsondata, function(i,item) {
    92. for(var j=0; j<item.length; j++) {
    93. data.setCell(parseInt(i), j, item[j]);
    94. }
    95. });
    97. // redraw the current page (activates the next button)
    98. visualization.draw(data, {page:'enable', pageSize: limit, startPage: e['page']});
    100. // save as cached
    101. cachedpages.push(1);
    102. });
    103. });
    105. // Crate the visualization bar.
    106. var chart = new google.visualization.BarChart(document.getElementById('chart'));
    107. drawPartly(chart, data, datacopy, 0, limit);
    109. visualization.draw(data, {page:'enable', pageSize: limit});
    110. }
    112. google.setOnLoadCallback(drawVisualization);
    113. </script>
    114. </head>
    115. <body style="font-family: Arial;border: 0 none;">
    116. <h1>Paging using AJAX with reloading of Chart</h1>
    117. <h2>Google Visualization API</h2>
    118. <p>Reloads additional data and appends it to the table</p>
    119. <p>Updates two visualizations when using pagination.</p>
    120. <a href="http://www.easy-coding.de">http://www.easy-coding.de</a>
    122. <div id="table"></div>
    123. <div id="chart" style="width:400px;height:200px"></div>
    124. </body>
    125. </html>
    Alles anzeigen


    == Demo ==
    demo.easy-coding.de/google-vis…-ajax-visualizations.html

    easy-coding.de/Attachment/565/…f7a4565e9f13b1d562c146513
    Bilder

    • google-visualization-pagination-mit-ajax-und-mehreren-visualisierungen.png

      5,14 kB, 560×190, 878 mal angesehen

    9.106 mal gelesen