Skip to content

Instantly share code, notes, and snippets.

@stlsmiths
Created October 23, 2012 19:16
Show Gist options
  • Save stlsmiths/3940973 to your computer and use it in GitHub Desktop.
Save stlsmiths/3940973 to your computer and use it in GitHub Desktop.
DS pag with custom query
// YUI3 functionality
YUI({skin: 'night'}).use('autocomplete', 'autocomplete-filters', 'autocomplete-highlighters', 'datatable-sort', 'datatable-scroll', 'cssfonts', 'cssbutton', 'dataschema-json', 'datatable-datasource', 'datasource-io', 'datatype', "datasource-jsonschema", 'model-sync-rest', 'gallery-paginator-view', 'gallery-datatable-paginator', 'dataschema', function(Y){
// Create datasource
var ds = new Y.DataSource.IO({source: '/index/test/load'});
ds.plug(Y.Plugin.DataSourceJSONSchema, {
schema: {
resultListLocator: 'Results',
resultFields: ['id', 'name'],
metaFields: {
totalItems: 'totalItems',
itemsPerPage: 'itemsPerPage',
itemIndexStart: 'itemIndexStart'
}
}
});
// Create column definitions
var colsB = [
{key: "id", label: "Id!", className: 'align-center'},
{key: "name", label: "Name!", className: 'align-center'}
];
// Create datatable
var dtableB = new Y.DataTable({
columns: colsB,
paginator: new Y.PaginatorView({
model: new Y.PaginatorModel({itemsPerPage:10}),
container: '#pagContB',
pageOptions: [ 10, 20, 50 ]
}),
// Since requestString Template and server response "comply" with the PaginatorModel properties ... then NO serverPaginatorMap is required ...
requestStringTemplate: "?page={page}&itemsPerPage={itemsPerPage}&sortBy={sortBy}&query={query}"
});
// Uh, add autocomplete?
var acEle = Y.one('#dtFilter');
acEle.plug(Y.Plugin.AutoComplete);
// Bind datasource to datatable?
dtableB.plug(Y.Plugin.DataTableDataSource, {
datasource: ds,
initialRequest: Y.Lang.sub(dtableB.get('requestStringTemplate'),{
page: dtableB.paginator.model.get('page'),
itemsPerPage: dtableB.paginator.model.get('itemsPerPage'),
sortBy: Y.JSON.stringify( dtableB.get('sortBy') || {} ) || null,
query: dtableB.ac || ''
})
});
// Handle autocomplete query event
acEle.ac.on('query', function(e, dt) {
// Reload datatable with search query
dt.datasource.load({
request: Y.Lang.sub(dt.get('requestStringTemplate'),{
page: dt.paginator.model.get('page'),
itemsPerPage: dt.paginator.model.get('itemsPerPage'),
sortBy: Y.JSON.stringify(dt.get('sortBy') || {}) || null,
query: e.query
})
});
}, null, dtableB);
// When using DS Pagination the DataTable MUST be rendered AFTER the datasource is plugged in
dtableB.render('#tableB');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment