Created
October 23, 2012 19:16
-
-
Save stlsmiths/3940973 to your computer and use it in GitHub Desktop.
DS pag with custom query
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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