❗️ jQuery jPList plugin is deprecated. Please check pure JavaScript (ES6) jPList Library alternative instead.
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
Documentation
Settings
- Getting Started
- Controls Settings
- JavaScript Settings
- Animation Settings
- Deep Links Settings
- Storage Settings
- Data Sources
- 'Redraw Callback' Function
API
Sources
Addons
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!