Pagination mit AJAX

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 (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']});
    12. </script>
    14. <script type="text/javascript">
    15. /**
    16. * draws the visualization, called via google.setOnLoadCallback
    17. */
    18. function drawVisualization() {
    19. // how many items should be visible per page
    20. var limit = 4;
    22. // preload one more page
    23. var firstload_entries = (limit*2);
    25. // set the first two pages as preloaded (index is important)
    26. var cachedpages = [1,1];
    28. // Create and populate the data table.
    29. var data = new google.visualization.DataTable();
    30. data.addColumn('string', 'Item');
    31. data.addColumn('number', 'Rating');
    32. data.addColumn('boolean', 'Check');
    34. // fill the first entries with sample data
    35. data.addRows(firstload_entries);
    36. for(var i=0; i<firstload_entries; i++) {
    37. data.setCell(i, 0, 'Item '+i);
    38. data.setCell(i, 1, i*i);
    39. data.setCell(i, 2, true);
    40. }
    42. // Create and draw the visualization.
    43. var visualization = new google.visualization.Table(document.getElementById('table'));
    44. google.visualization.events.addListener(visualization, 'page', function(e) {
    45. var next = e['page']+1;
    47. // preload next page if now existing yet
    48. if(typeof(cachedpages[next]) != 'undefined') return;
    50. // load data via json
    51. $.getJSON("status.php", {page:next, limit:limit}, function(jsondata){
    52. // specify the index where rows should be inserted
    53. data.insertRows(next*limit, limit);
    55. // insert data
    56. $.each(jsondata, function(i,item) {
    57. for(var j=0; j<item.length; j++) {
    58. data.setCell(parseInt(i), j, item[j]);
    59. }
    60. });
    62. // redraw the current page (activates the next button)
    63. visualization.draw(data, {page:'enable', pageSize: limit, startPage: e['page']});
    65. // save as cached
    66. cachedpages.push(1);
    67. });
    68. });
    70. visualization.draw(data, {page:'enable', pageSize: limit});
    71. }
    73. google.setOnLoadCallback(drawVisualization);
    74. </script>
    75. </head>
    76. <body style="font-family: Arial;border: 0 none;">
    77. <h1>Paging using AJAX</h1>
    78. <h2>Google Visualization API</h2>
    79. <p>Reloads additional data and appends it to the table</p>
    81. <a href="http://www.easy-coding.de">http://www.easy-coding.de</a>
    82. <div id="table"></div>
    83. </body>
    84. </html>
    Alles anzeigen


    == Demo ==
    demo.easy-coding.de/google-vis…on/paging-using-ajax.html

    9.543 mal gelesen