jQuery Plugin For Sorting, Paginating, Filtering Any Content - jplist

File Size: 29.7 MB
Views Total: 49365
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Sorting, Paginating, Filtering Any Content - jplist

jplist is a powerful and flexible jQuery plugin that enables you to sort, paginate, filter any Html content like tables, lists, div elements etc...


  • Ascending and descending sorting
  • Alphanumeric and numeric sorting
  • Sorting by date and time
  • Auto pagination
  • Any number of textbox filters
  • Any number of drop down filters
  • Checkbox and radio button filters
  • Data sources: PHP + MySQL, ASP.NET + Sql Server, PHP + SQLite
  • Supports local storage and cookies
  • Grid/list view demo page
  • Fully customizable styles
  • Works in all major browsers
  • SEO friendly
  • Annotated source code

Getting Started:

1. Include the jQuery javascript library and the jQuery jplist plugin's javascript and CSS in the document.

<link href="css/jplist.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jplist.min.js"></script>

2. Usages:

<script type="text/javascript">	


//enable/disable logging information: if firebug is installed the debuging information will be displayed in the firebug console
debug: false

//main options
,itemsBox: '.list' //items container jQuery path
,itemPath: '.list-item' //jQuery path to the item within the items container
,panelPath: '.panel' //panel jQuery path
,noResults: '.jplist-no-results' //'no reaults' section jQuery path
,redrawCallback: '' //'redraw callback' function occurs on every jplist action like sort, filter, pagination etc. Click here to see a demo.
,iosBtnPath: '.jplist-ios-button'

//animate to top - enabled by data-control-animate-to-top="true" attribute in control
,animateToTop: 'html, body'
,animateToTopDuration: 0 //in milliseconds (1000 ms = 1 sec)

//animation effects
,effect: '' //'', 'fade'
,duration: 300			
,fps: 24			

//save plugin state with storage
,storage: '' //'', 'cookies', 'localstorage'			
,storageName: 'jplist'
,cookiesExpiration: -1 //cookies expiration in minutes (-1 = cookies expire when browser is closed)

//deep linking
,deepLinking: false
,delimiter0: ':' //this delimiter is placed after the control name 
,delimiter1: '|' //this delimiter is placed between key-value pairs
,delimiter2: '~' //this delimiter is placed between multiple value of the same key
,delimiter3: '!' //additional delimiter

,historyLength: 10
//data source
,dataSource: {
type: 'html' //'html', 'server'
//data source server side
,server: {
 //ajax settings
 url: 'server.php'
 ,dataType: 'html'
 ,type: 'POST'
 //,cache: false
 ,serverOkCallback: null
 ,serverErrorCallback: null

//panel controls
,controlTypes: {
 className: 'DefaultSort'
 ,options: {}
 className: 'Dropdown'
 ,options: {}
 className: 'PaginationInfo'
 ,options: {}

 className: 'Counter'
 ,options: {
 ignore: '[~!@#$%^&*()+=`\'"\/\\_]+' //[^a-zA-Z0-9]+ not letters/numbers: [~!@#$%^&*\(\)+=`\'"\/\\_]+
 className: 'Pagination'
 ,options: {
 range: 7
 ,jumpToStart: false
 ,prevArrow: '‹'
 ,nextArrow: '›'
 ,firstArrow: '«'
 ,lastArrow: '»'
 className: 'Reset'
 ,options: {}
 className: 'Select'
 ,options: {}
 className: 'Textbox' 
 ,options: {
 eventName: 'keyup'
 ,ignore: '[~!@#$%^&*()+=`\'"\/\\_]+' //[^a-zA-Z0-9]+ not letters/numbers: [~!@#$%^&*\(\)+=`\'"\/\\_]+							
 className: 'Views'
 ,options: {}
 className: 'CheckboxGroupFilter'
 ,options: {}

 className: 'CheckboxTextFilter'
 ,options: {
 ignore: '' //regex for the characters to ignore, for example: [^a-zA-Z0-9]+
 className: 'ButtonFilter'
 ,options: {}

 className: 'ButtonFilterGroup'
 ,options: {}

 className: 'ButtonTextFilter'
 ,options: {
ignore: '[~!@#$%^&*()+=`\'"\/\\_]+' //[^a-zA-Z0-9]+ not letters/numbers: [~!@#$%^&*\(\)+=`\'"\/\\_]+
 className: 'ButtonTextFilterGroup'
 ,options: {
 ignore: '[~!@#$%^&*()+=`\'"\/\\_]+' //[^a-zA-Z0-9]+ not letters/numbers: [~!@#$%^&*\(\)+=`\'"\/\\_]+
 className: 'RadioButtonsFilter'
 ,options: {}

 className: 'RangeSliderToggleFilter'
 ,options: {}
 className: 'BackButton'
 ,options: {}
 className: 'Preloader'
 ,options: {}

3. Panel Controls Attributes.

  • data-control-type="type": panel control type like 'drop-down', 'textbox', 'pagination'
  • data-control-name="name": panel control name. It should be the same in the top and bottom panels.
  • data-control-action="action": panel control action like 'sort', 'filter', 'paging'.
  • data-control-storage="false": exclude control from storage (when cookies/localstorage is enabled)
  • data-control-deep-link="false": exclude control from deep link (when deep linking is enabled)
  • data-control-animation="false": exclude control from animation effects
  • data-control-animate-to-top="true": perform "animate to top" effect for the given control; as a rule, used in bottom panel

Change logs:


  • Fixed issue within jplist.core-ajax.min.js
  • Customize pagination for << < > >> for the visually impaired


  • Fixed data-selected="false" on sort buttons not working


  • Fixed Text-filter issue with Google Chrome.
  • Range filter multiple numbers support is added
  • added clear button to the store locator autocomplete
  • Fixed Failure after empty the list and appending a new item
  • added clear button to textbox filter
  • added support for typing delay to textbox filter
  • pagination dropdown fix for view all


  • v5.2.0


  • bugfix


  • added possibility to ad cotrnol dynamically
  • fixed Button Text Filter on image attribute


  • added possibility to get a list of source files using node


  • v5.0.0


  • Fixed Deeplink not working for pagination control.


  • added multiple sort to the sort bundle


  • fixed issue with reset button in jquery ui bundle


  • update add / del API: now it's possible to add / del range of items


  • added mode (startsWith, endsWith, contains and advanced) to the text filter controls


  • added default value in jQuery UI Date Picker Range Filter Control


  • fixed deep links in pagination bundle


  • deep links support moved to the separate service; added hashStart option


  • fixed issue with default values in jquery ui range slider control


  • fixed Call to a member function fetchColumn() on a non-object


  • fixed deep linking issue in filter dropdown bundle


  • fixed issue in deep linking in radio buttons control


  • added and, or, not operators to the text search controls and bundles


  • fixed issue with 'exclude from storage' attribute


  • fixed issue with textbox control default value
  • fixed issue with deep links in date-picker-range-filter


  • fixed issue with checkbox filter in php data sources


  • fixed jplist events structure; fixed issues with exclude from storage data attribute.


  • added jquery ui date picker filter control


This awesome jQuery plugin is developed by 1rosehip. For more Advanced Usages, please check the demo page or visit the official website.