Skip to content

Instantly share code, notes, and snippets.

Created February 25, 2013 19:11
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
AlloyUI: Pagination + Datatable
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>Pagination + Datatable</title>
<!-- AlloyUI -->
<link rel="stylesheet" href="">
<script src=""></script>
<div class="content">
<div id="myDataTable"></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>
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
new Y.Pagination({
contentBox: '#pagination .aui-pagination-content',
page: 1,
on: {
changeRequest: function(event) {
if ( === 1) {
dataTable.set('data', dataPageOne);
} else if ( === 2) {
dataTable.set('data', dataPageTwo);
} else if ( === 3) {
dataTable.set('data', dataPageThree);
Copy link

thank you, it was useful !

Copy link


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