Skip to content

Instantly share code, notes, and snippets.

@lsmith

lsmith/DataTable with server-side pagination and in-page sorting.html

Created September 4, 2009 05:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lsmith/180738 to your computer and use it in GitHub Desktop.
Save lsmith/180738 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
DataTable with server-side pagination and in-page sorting.html
<!doctype html>
<html>
<head>
<title>Test Page</title>
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/combo?2.7.0/build/datatable/assets/skins/sam/datatable.css&2.7.0/build/paginator/assets/skins/sam/paginator.css">
</head>
<body class="yui-skin-sam">
<div id="pag"></div>
<div id="tbl"></div>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/connection/connection-min.js&2.7.0/build/json/json-min.js&2.7.0/build/element/element-min.js&2.7.0/build/datasource/datasource-min.js&2.7.0/build/datatable/datatable-min.js&2.7.0/build/paginator/paginator-min.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {
var Ex = YAHOO.namespace('example');
Ex.dataSource = new YAHOO.util.DataSource('data.php?recs=10', {
responseType : YAHOO.util.DataSource.TYPE_JSON,
responseSchema : {
resultsList: 'records',
fields : ['foo','bar','baz']
}
});
Ex.dataSource.doBeforeParseData = function (req, res) {
Ex.paginator.set('totalRecords',res.total);
return res;
};
Ex.paginator = new YAHOO.widget.Paginator({
containers: ['pag'],
rowsPerPage: 10
});
Ex.paginator.subscribe('changeRequest', function (state) {
Ex.dataTable.unselectAllRows();
Ex.dataTable.unselectAllCells();
Ex.dataSource.sendRequest('recs=10&offset=' + state.recordOffset, {
success: function (req, res, payload) {
Ex.dataTable.onDataReturnReplaceRows(req, res, payload);
Ex.paginator.setState(state);
}
});
});
Ex.cols = [
{ key: 'foo', sortable: true },
{ key: 'bar', sortable: true },
{ key: 'baz', sortable: true }
];
Ex.conf = {
initialRequest : 'recs=10'
};
Ex.dataTable = new YAHOO.widget.DataTable('tbl',Ex.cols,Ex.dataSource,Ex.conf);
Ex.paginator.render();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment