jsieber/jplist

jPList jQuery Data Grid Controls is a flexible jQuery plugin for sorting, pagination and filtering of any HTML structure (DIVs, UL/LI, tables, etc).

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

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

• [PHP + MySQL] (https://github.com/no81no/jplist/tree/master/server)
• ASP.NET + Sql Server
• NodeJS, Express and MySQL

Examples

Layout Examples

• DIVs Layout Demo - demo with DIV elements and all default actions like sort, pagination, etc.
• Table Demo 1 - demo with all default actions like sort, pagination, etc. in TABLE
• Table Demo 2 - table with header and alternating rows with different colors
• 2 Tables on the Page - demo with 2 tables on the page and all default actions like sort, pagination, etc.
• UL LI Demo - unordered list demo with all default actions like sort, pagination, etc. Added views control.
• Views Control (List, Grid and Thumbs Views) - demo with control that switches between views: list, grid or thumbs
• Demo With Sticky Panel - demo with sticky panel

Data Sources

• PHP + MySQL Example - server side demo using PHP and MySQL database
• PHP + MySQL + JSON + Handlebars Example - server side demo using PHP, MySQL database with JSON format and Handlebars Template
• PHP + MySQL + JSON + Mustache Example - server side demo using PHP, MySQL database with JSON format and Mustache Template
• PHP + MySQL + XML + XSLT Example - server side demo using PHP, MySQL database with XML format and XSLT Template
• ASP.NET and SQL Server Demo - server side demo using ASP.NET and SQL Server database
• PHP + SQLite Example - server side demo using PHP and SQLite database

Controls Examples

• Dropdown Filters With UL/LI - filter by jQuery path dropdown with UL/LI layout
• Dropdown Filters With SELECT - filter by jQuery path dropdown with SELECT layout
• Double Sort Demo - example with double sorting
• Deep Linking Demo - page state controlled by URL
• Google Style Pagination
• Star Rating Demo - sort by 'Most Reviewed' and by 'Top Rated' items
• Hidden Sort (Default Sort Control)

###Toggle Filters

• Checkbox Filters - filter by jQuery path using group of checkboxes. OR logic inside group, AND logic between different groups
• Radio Button Filters - filter by jQuery path with radio buttons
• Button Filters - filter by jQuery path with BUTTON elements
• Button Filters Group - filter by jQuery path using group of elements like SPAN, INPUT, etc. OR logic inside group, AND logic between different groups
• Button Filters Group (Single Mode) - button filters group when only one button can be selected at the same time
• Button Filters and Counters - filter by jQuery path with SPAN elements and counter controls
• Range Filter - range filter by jQuery path with any element (SPAN, INPUT, etc.)
• Checkbox Text Filter - filter by checkboxes text values. OR logic inside group, AND logic between different groups
• Button Text Filter - filter by text using any elements like SPAN, INPUT etc.
• Button Text Filter Group - filter by text using any elements like SPAN, INPUT etc. OR logic inside group, AND logic between different groups

###jPList with jQuery UI

• Range Slider - jQuery UI range slider
• Date Picker Filter - jQuery UI date picker

DateTime Examples

• DateTime 1 - {day}.{month}.{year}
• DateTime 2 - {month} {day}, {year} {hour}:{min}:{sec}
• DateTime 3 - {month} {day}, {year}

###Other Examples

• Fade Animation - example page of fade animation in jPList
• jPList with Fancybox - example of jPList with lightbox
• Large Amount of Data - demo with 1000 items on the page

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 jplist.core-ajax.min.js from sources:

npm run ajaxcore

Enable verbose mode:

npm run ajaxcore -- --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/addons/textbox-filter/js/config.json

Enable verbose mode:

node ./build/closure/rebuild-js.js src/addons/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/addons/control-folder-name/css/styles.less > dist/css/jplist.control-folder-name.min.css

For example:

lessc -x src/addons/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/addons/control-folder-name/js/config.json --type=files

//for example
node ./build/closure/get-js-files-list.js src/addons/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

• Project Home
• jPList on Facebook
• jPList on Google+
• jPList on Twitter+