Code

DataGrid - JavaScript Pagination, Sort and Filter

DataGrid - JavaScript Pagination, Sort and Filter

DataGrid Library

JavaScript library for sorting, filtering, and pagination of any HTML content

DataGrid is a simple and powerful solution to enable sorting, filtering, and pagination on any page.









General Features

  • DataGrid library works with any HTML structure using data attributes.
  • The library allows the sorting of text and numeric information.
  • It has configurable pagination control with a rich set of settings.
  • The library supports text filters with multiple modes and options.
  • The library has different path filters , like checkboxes, radio buttons, and select controls.
  • The widget is written in pure ES6 JavaScript, no dependencies are required.
  • The library has the support of deep links that generate a unique URL for every controls state combination.
  • The library support local storage, session storage and cookies .

Examples

Documentation

Storage Options

It is possible to save user selection in browser storage or cookies. This way, the previous value selected by the user will be restored once he/she returns to the page from another page or website, or after the page refresh.

  • Local storage – the user selection will be stored in the browser until the user clears browsing data.
  • Session storage – the user selection will be store during one browser session (until the user closes the browser, opens a new browser window or tab, or until the user clears browsing data).
  • Cookies – this option additionally allows sending user selection to the server with each request.

More Features

  • The same control may appear multiple times on the page.
  • Controls may be placed anywhere in the document, event in the content items.
  • Any HTML content is supported, for example, DIV elements, tables, UL / OK lists, etc.
  • DataGrid library can be used with any CSS framework or with custom styles.
  • In most cases, the user defines HTML & CSS of controls (the library does not create their structure except pagination control).
  • The user ultimately defines all look & feel of the page; DataGrid library has minimal CSS styles.

Changelog

v1.0.2 – 08 January 2021

v1.0.1 – 31 December 2020

    The initial plugin upload.
by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey