zenorocha/aui-pagination+datatable.html

## aui-pagination+datatable.html
<!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>
	<!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>