PageRenderTime 44ms CodeModel.GetById 14ms RepoModel.GetById 0ms app.codeStats 0ms

/examples/infinite-mode.html

https://github.com/rickhewes/backbone-pageable
HTML | 125 lines | 110 code | 15 blank | 0 comment | 0 complexity | 067b4bd1c609bf64958a639a10047a3a MD5 | raw file
Possible License(s): MIT
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>backbone-pageable infinite mode demo</title>
  6. <link rel="stylesheet" href="css/bootstrap.css" />
  7. <link rel="stylesheet" href="css/backgrid.css" />
  8. <link rel="stylesheet" href="css/extensions/paginator/backgrid-paginator.css" />
  9. <link rel="stylesheet" href="css/extensions/text-cell/backgrid-text-cell.css" />
  10. </head>
  11. <body>
  12. <div id="main">
  13. <div class="container">
  14. <div class="row-fluid">
  15. <div class="span12 alert">
  16. Feel free to peek into the source of this page and play with the code in your browser&apos;s console.
  17. </div>
  18. </div>
  19. <div class="row-fluid">
  20. <div class="span12">
  21. <div id="grid"></div>
  22. </div>
  23. </div>
  24. </div>
  25. </div>
  26. <script src="js/jquery.js"></script>
  27. <script src="js/underscore.js"></script>
  28. <script src="js/backbone.js"></script>
  29. <script src="../lib/backbone-pageable.js"></script>
  30. <script src="js/bootstrap.js"></script>
  31. <script src="js/backgrid.js"></script>
  32. <script src="js/extensions/paginator/backgrid-paginator.js"></script>
  33. <script src="js/extensions/text-cell/backgrid-text-cell.js"></script>
  34. <script>
  35. var columns = [{
  36. name: "number",
  37. cell: Backgrid.IntegerCell.extend({ orderSeparator: '' }),
  38. editable: false,
  39. sortable: false
  40. }, {
  41. name: "title",
  42. cell: "string",
  43. sortable: false
  44. }, {
  45. name: "body",
  46. cell: "text",
  47. sortable: false
  48. }, {
  49. name: "updated_at",
  50. cell: "datetime",
  51. editable: false,
  52. sortable: false
  53. }, {
  54. name: "closed_at",
  55. cell: "datetime",
  56. editable: false,
  57. sortable: false
  58. }];
  59. var Issue = Backbone.Model.extend({});
  60. // Works exactly like Backbone.Collection.
  61. var Issues = Backbone.PageableCollection.extend({
  62. model: Issue,
  63. // Enable infinite paging
  64. mode: "infinite",
  65. url: "https://api.github.com/repos/documentcloud/backbone/issues?state=closed",
  66. // Initial pagination states
  67. state: {
  68. firstPage: 0,
  69. pageSize: 15,
  70. sortKey: "updated",
  71. order: 1
  72. },
  73. // You can remap the query parameters from `state` keys from
  74. // the default to those your server supports
  75. queryParams: {
  76. totalPages: null,
  77. totalRecords: null,
  78. sortKey: "sort",
  79. order: "direction",
  80. directions: {
  81. "-1": "asc",
  82. "1": "desc"
  83. }
  84. }
  85. });
  86. var issues = new Issues();
  87. var grid = new Backgrid.Grid({
  88. columns: columns,
  89. collection: issues,
  90. footer: Backgrid.Extension.Paginator.extend({
  91. // If you anticipate a large number of pages, you can adjust
  92. // the number of page handles to show. The sliding window
  93. // will automatically show the next set of page handles when
  94. // you click next at the end of a window.
  95. windowSize: 20, // Default is 10
  96. // If you anticipate a small number of pages, you can choose
  97. // to disable the rendering of fast forward handles to save
  98. // space.
  99. hasFastForward: true, // true is the default
  100. fastForwardHandleLabels: {
  101. prev: "<",
  102. next: ">"
  103. }
  104. })
  105. });
  106. $("#grid").append(grid.render().$el);
  107. issues.getFirstPage();
  108. </script>
  109. </body>
  110. </html>