Grid-SPF

SPF = Sorting, Paging (Pager), Filtering

See also Dataview

 

Work in progress covers a datasource that has an API for configuring sorting, paging and filtering, and an SPI for implementing different remote source (e.g. Flickr or Netflix API). There's also an implementation of a local datasource, which uses an array of existing data.

 

See also Grid-ObservableData for investigation of integration of datasource (sorting paging and filtering) and Grid with "observable data". It includes a modified version of grid.html demo from below.

 

Open Issues/TODOs

• Add an example with scroll based paging
• once without a totals count, e.g. using Twitter API
• Update the spec below into the proper format, like other widgets 
• Implement slideshow preloader as nested datasources (in addition to current implementation of single datasource). One datasource should just handle remote requests and the other should delegate out to that datasource while caching results locally.
• implemented as datasource-nested.js, preloads when hitting the last cached page
• somewhat buggy
• needs another example, e.g. combining nested with odata 
• filtering: how to handle OR, NOT, AND operations for a single field or across multiple fields
• test with oData API, which supports that 
• the pager control is incomplete, we need at least a better prototype showing a few variations, e.g. selecting pages ala google search paging
• for filtering we need examples on using other controls for input filters, e.g. datepicker to select a date or date range, and integrating that with datasource  

  

Demos/examples/prototypes

Grid with menus, Netflix API

http://view.jqueryui.com/grid/grid-spf/menugrid.html

An actual grid with a menu on each column header and an input to filter. A paging toolbar underneath.

 

http://view.jqueryui.com/grid/grid-spf/menugrid-products.html

Same as above, but with a different oData resource, here the sample Northwind service.

 

Grid, eBay API

http://view.jqueryui.com/grid/grid-spf/products.html

A grid showing eBay listings, with a selector for sorting, an input for search by keywords and a paging toolbar.

 

Datasource-powered autocomplete

http://view.jqueryui.com/grid/grid-spf/autocomplete.html

Uses a customized remote datasource to feed an autocomplete.

 

Grid mixbag

http://view.jqueryui.com/grid/grid-spf/grid.html

Local and remote datasources with various buttons to set sorting, filtering and paging.

 

Photo slideshow, from markup

http://view.jqueryui.com/grid/grid-spf/slideshow-local.html

A photo slideshow that uses existing markup to populate a datasource, and using templates to then render individual photos with customizable pagesize and a paging toolbar.

 

Photo slideshow, from remote API

http://view.jqueryui.com/grid/grid-spf/slideshow-remote.html

Similar to the above, using the same slideshow widget, but with a remote datasource based on the Flickr API.

 

Photo slideshow, from remote API, with preloading

http://view.jqueryui.com/grid/grid-spf/slideshow-preloader.html

Another variant of remote Flickr data, but using a nested preloader datasource for preloading pages.