/examples/infinite-mode.html
HTML | 125 lines | 110 code | 15 blank | 0 comment | 0 complexity | 067b4bd1c609bf64958a639a10047a3a MD5 | raw file
Possible License(s): MIT
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <title>backbone-pageable infinite mode demo</title>
-
- <link rel="stylesheet" href="css/bootstrap.css" />
- <link rel="stylesheet" href="css/backgrid.css" />
- <link rel="stylesheet" href="css/extensions/paginator/backgrid-paginator.css" />
- <link rel="stylesheet" href="css/extensions/text-cell/backgrid-text-cell.css" />
- </head>
- <body>
- <div id="main">
- <div class="container">
- <div class="row-fluid">
- <div class="span12 alert">
- Feel free to peek into the source of this page and play with the code in your browser's console.
- </div>
- </div>
- <div class="row-fluid">
- <div class="span12">
- <div id="grid"></div>
- </div>
- </div>
- </div>
- </div>
- <script src="js/jquery.js"></script>
- <script src="js/underscore.js"></script>
- <script src="js/backbone.js"></script>
- <script src="../lib/backbone-pageable.js"></script>
- <script src="js/bootstrap.js"></script>
- <script src="js/backgrid.js"></script>
- <script src="js/extensions/paginator/backgrid-paginator.js"></script>
- <script src="js/extensions/text-cell/backgrid-text-cell.js"></script>
- <script>
- var columns = [{
- name: "number",
- cell: Backgrid.IntegerCell.extend({ orderSeparator: '' }),
- editable: false,
- sortable: false
- }, {
- name: "title",
- cell: "string",
- sortable: false
- }, {
- name: "body",
- cell: "text",
- sortable: false
- }, {
- name: "updated_at",
- cell: "datetime",
- editable: false,
- sortable: false
- }, {
- name: "closed_at",
- cell: "datetime",
- editable: false,
- sortable: false
- }];
-
- var Issue = Backbone.Model.extend({});
-
- // Works exactly like Backbone.Collection.
- var Issues = Backbone.PageableCollection.extend({
- model: Issue,
-
- // Enable infinite paging
- mode: "infinite",
-
- url: "https://api.github.com/repos/documentcloud/backbone/issues?state=closed",
-
- // Initial pagination states
- state: {
- firstPage: 0,
- pageSize: 15,
- sortKey: "updated",
- order: 1
- },
-
- // You can remap the query parameters from `state` keys from
- // the default to those your server supports
- queryParams: {
- totalPages: null,
- totalRecords: null,
- sortKey: "sort",
- order: "direction",
- directions: {
- "-1": "asc",
- "1": "desc"
- }
- }
- });
-
- var issues = new Issues();
- var grid = new Backgrid.Grid({
- columns: columns,
- collection: issues,
- footer: Backgrid.Extension.Paginator.extend({
- // If you anticipate a large number of pages, you can adjust
- // the number of page handles to show. The sliding window
- // will automatically show the next set of page handles when
- // you click next at the end of a window.
- windowSize: 20, // Default is 10
- // If you anticipate a small number of pages, you can choose
- // to disable the rendering of fast forward handles to save
- // space.
- hasFastForward: true, // true is the default
-
- fastForwardHandleLabels: {
- prev: "<",
- next: ">"
- }
- })
- });
- $("#grid").append(grid.render().$el);
- issues.getFirstPage();
- </script>
- </body>
- </html>