Current File : /home/riacommer/public_html/admin/vendor/backbone.paginator/examples/server-mode.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>backbone-pageable server mode demo</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.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">
<div class="col-md-12 alert alert-info">
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">
<div class="col-md-12">
<aside class="note">
<h3>Note:</h3>
<p>Github's API is <a
href="http://developer.github.com/v3/search/#rate-limit" title="Github
API Rate Limit">rate limited</a>, if the example doesn't work, you
may want to try again in a few minutes.</p>
</aside>
<div id="grid"></div>
<div id="paginator"></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.paginator.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>
// Works exactly like Backbone.Collection.
var Issues = Backbone.PageableCollection.extend({
url: "https://api.github.com/search/issues",
// Initial pagination states
state: {
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",
q: "state:closed repo:jashkenas/backbone"
},
// get the state from Github's search API result
parseState: function (resp, queryParams, state, options) {
return {totalRecords: resp.total_count};
},
// get the actual records
parseRecords: function (resp, options) {
return resp.items;
}
});
var issues = new Issues();
var grid = new Backgrid.Grid({
columns: [{
name: "id",
cell: Backgrid.IntegerCell.extend({ orderSeparator: '' }),
sortable: false,
editable: false
}, {
name: "title",
cell: "string",
sortable: false,
editable: false
}, {
name: "body",
cell: "text", // See the TextCell extension
sortable: false
}, {
name: "comments",
cell: "integer"
}],
collection: issues
});
var paginator = new Backgrid.Extension.Paginator({
collection: issues
});
$("#grid").append(grid.render().$el);
$("#paginator").append(paginator.render().$el);
issues.fetch({reset: true});
</script>
</body>
</html>
Mini Shell