:exclamation: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

<div> <img src="https://raw.githubusercontent.com/no81no/jplist/master/demo/img/common/jplist-controls.png"> </div>

Reporting issues

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

Common Features <img src="https://raw.githubusercontent.com/no81no/jplist/master/demo/img/common/jplist.png" align="right">

• 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 <img src="https://raw.githubusercontent.com/no81no/jplist/master/demo/img/common/bookmark.png" align="right">

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 <img src="https://raw.githubusercontent.com/no81no/jplist/master/demo/img/common/tools.png" align="right">

Settings

• Getting Started
• Controls Settings
• JavaScript Settings
• Animation Settings
• Deep Links Settings
• Storage Settings
• Data Sources
• 'Redraw Callback' Function

API

• Add one item
• Add range of items
• Remove one item
• Remove range of items

Sources

• JS Minification and Lint
• CSS Minification
• Source Files List
• Tests
• Changelog

Addons

• How to create a jPList addon

Browser Compatibility <img src="https://raw.githubusercontent.com/no81no/jplist/master/demo/img/common/puzzle.png" align="right">

• 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!

[Li