Skip to content

Instantly share code, notes, and snippets.

@zenorocha
Created February 25, 2013 19:11
Show Gist options
  • Save zenorocha/5032360 to your computer and use it in GitHub Desktop.
Save zenorocha/5032360 to your computer and use it in GitHub Desktop.
AlloyUI: Pagination + Datatable
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pagination + Datatable</title>
<!-- AlloyUI -->
<link rel="stylesheet" href="http://cdn.alloyui.com/2.0.0pr2/aui-css/css/bootstrap.min.css">
<script src="http://cdn.alloyui.com/2.0.0pr2/aui/aui-min.js"></script>
</head>
<body>
<div class="content">
<div id="myDataTable"></div>
</div>
<div id="pagination" class="aui-pagination aui-pagination-centered">
<ul class="aui-pagination-content">
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
<script>
YUI().use('aui-datatable', 'aui-pagination', function(Y) {
var columns = ["name", "address", "city", "state"],
dataPageOne = [{ name:"Bob F. Uncle", address:"9899 Random Road", city:"Los Angeles", state:"CA" }],
dataPageTwo = [{ name:"John A. Smith", address:"1236 Some Street", city:"San Francisco", state:"CA" }],
dataPageThree = [{ name:"Bob C. Uncle", address:"9996 Random Road", city:"Los Angeles", state:"CA" }];
var dataTable = new Y.DataTable.Base({
columnset: columns,
data: dataPageOne
}).render('#myDataTable');
new Y.Pagination({
contentBox: '#pagination .aui-pagination-content',
page: 1,
on: {
changeRequest: function(event) {
if (event.state.page === 1) {
dataTable.set('data', dataPageOne);
} else if (event.state.page === 2) {
dataTable.set('data', dataPageTwo);
} else if (event.state.page === 3) {
dataTable.set('data', dataPageThree);
}
}
}
}).render();
});
</script>
</body>
</html>
@QuangChuIT
Copy link

Lol

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment