Skip to content
jPList jQuery Data Grid Controls is a flexible jQuery plugin for sorting, pagination and filtering of any HTML structure (DIVs, UL/LI, tables, etc).
HTML JavaScript PHP CSS
Latest commit 0d3ad7e May 6, 2016 @no81no readme update

README.md

jPList - jQuery Data Grid Controls jPList - jQuery Data Grid Controls

jPList is a flexible jQuery plugin for sorting, pagination and filtering of any HTML structure (DIVs, UL/LI, tables, etc). Get started at jplist.com

Current stable jPList 5.2.0 version is available on cdnjs:

Reporting issues

Please read jPList guidelines that includes directions for opening issues and making feature requests.

Common Features

  • Works with any content (tables, lists, div elements etc...)
  • Works with JavaScript templates like Handlebars, Mustache etc.
  • Supports XML + XSLT
  • Grid/list view demo page
  • Supports local storage and cookies
  • Has deep links support
  • Fully customizable styles
  • Works in all major browsers
  • Annotated source code
  • Solid documentation

Sorting

  • Ascending and descending sorting
  • Sort numbers, text, date and time
  • SELECT and UL/LI sort controls
  • Sort by 'Most Reviewed' and by 'Top Rated' items

Pagination

  • Auto pagination control
  • Google style pagination
  • Items per page control

Filter and Search

  • Any number of textbox filters
  • Any number of dropdown filters
  • Filter by jQuery path or by text content
  • Checkbox and radio button filters
  • Button filter controls
  • Range filter controls

Other Controls

  • Reset button Control
  • Back button Control
  • Counter Controls
  • jQuery UI range slider filter
  • jQuery UI date picker range filter

Data Sources

Examples

Layout Examples

Data Sources

Controls Examples

Toggle Filters

jPList with jQuery UI

DateTime Examples

Other Examples

Working with Sources

Create minified JS files:

To create jplist.core.min.js from sources:

npm run jscore

Enable verbose mode:

npm run jscore -- --verb

To create any minified bundle or control:

node ./build/closure/rebuild-js.js path-to-control-config-file

For example:

node ./build/closure/rebuild-js.js src/textbox-filter/js/config.json

Enable verbose mode:

node ./build/closure/rebuild-js.js src/textbox-filter/js/config.json --verb

To rebuild jplist.core.min.js and all controls:

node ./build/closure/rebuild-js-all.js

Lint:

To run jshint on jPList sources:

npm run lint

Create minified CSS files:

To create jplist.core.min.css from sources:

npm run csscore

To create jplist.demo-pages.min.css from sources:

npm run cssdemo

To create minified css for any control or bundle:

lessc -x src/control-folder-name/css/styles.less > dist/css/jplist.control-folder-name.min.css

For example:

lessc -x src/filter-toggle-bundle/css/styles.less > dist/css/jplist.filter-toggle-bundle.min.css

List of source files:

To get a list of source files (to be included in HTML or for other purpose):

//list of sources as HTML scripts
npm run corefiles

//simple source list
node ./build/closure/get-js-files-list.js src/core/js/config.json --type=files

//list of github raw urls
node ./build/closure/get-js-files-list.js src/core/js/config.json --type=github

//for any control; type can be: script, files or github
node ./build/closure/get-js-files-list.js src/control-folder-name/js/config.json --type=files

//for example
node ./build/closure/get-js-files-list.js src/filter-dropdown-bundle/js/config.json --type=script

Integration Tests:

jPList uses selenium to run integration tests. Also the root folder should be configured as jplist-php.local website. PHP / MySQL should be configured to test the relevant pages.

npm install

Run selenium server:

npm run selenium

Run the tests:

npm test

Unit Tests:

jPList uses qunit for the unit testing. It could be run in the browser using /test/qunit-tests/index.html.

Browser Compatibility

  • Internet Explorer 8+
  • Firefox
  • Chrome
  • Safari
  • Opera

jQuery Compatibility

  • Works with jQuery from version 1.8
  • Works with jQuery 2.x versions

Donations

If you find jPList useful, please consider making a donation to support project development. Thank you for your help!

Links

Something went wrong with that request. Please try again.