jQuery Tables Plugin & Tutorials with Example

HTML5 Inline Edit with PHP, MYSQL & jQuery Ajax

HTML5 Inline Edit with PHP, MYSQL & jQuery Ajax
Now a days, We are always looking for easiest way for people to interact with our Web Applications. I am going to tell you about In-Place Editing or Inline Editing. Popular websites like facebook wants their user to edit their profile information without having to navigate to different form.

HTML5′s new attribute called contenteditable , It takes care of inline editing automatically. We should write little jQuery code to send the data back to the server, so we can save it. Biggest advantage is we don’t need to create and toggle hidden forms.

Power Table : jQuery plugin for Bootstrap Tables

Power Table : jQuery plugin for Bootstrap Tables

You can use a combination of features that you want in the table. Our Js table features in below.

  • You can add the search feature in the table.
  • You can add the sorting feature in the table.
  • You can add the result sum feature end of the column.
  • You can change the value in the sql and table.
  • You can add the paginations feature in the table.
  • You can add the more results feature in the table.
  • You can add the display feature in the table for size.
  • Our Table Js library with your bootstrap themes.

jQuery editTable Plugin

jQuery editTable Plugin

jQuery editTable is a very small jQuery Plugin (~1Kb gzipped) that fill the gap left by the missing of a default input field for data tables. jQuery editTable can be used both in ajax and/or HTTP POST contest and let you preset the title and number of columns or just let complete freedom to the user. You can even append custom behaviors to single column cells (ex. jQuery UI Datepicker).

DTable : jQuery Data Table plugin

DTable : jQuery Data Table plugin

It’s a data table for jQuery. I made it to study grunt and it’s first part of my Symfony 2 admin boundle. The plugin is highly customizable, It’s uses html template to generate the table (it’s not necessary to be a table, can be anything see “Custom template” example) and the whole plugin module based, so you can add new features easily.

jQuery Tabelizer : Multi level grouping indicators for Tables

jQuery Tabelizer : Multi level grouping indicators for Tables

Tabelizer  is a jQuery multi level grouping indicators for tables.

TableNav : jQuery plugin providing navigation with Arrow keys in a Table

TableNav : jQuery plugin providing navigation with Arrow keys in a Table

jQuery tablenav is a jQuery utility plugin providing navigation with arrow keys in a table with input fields.You know the way you can navigate between cells in those spreadsheets apps? It’s nice to have something like that as well in your HTML tables.

Tiny editable jQuery Bootstrap Spreadsheet

Tiny editable jQuery Bootstrap Spreadsheet

This tiny (3KB, < 120 lines) jQuery plugin turns any table into an editable spreadsheet. Here are the key features:

  • No magic – works on a normal HTML table (so you can plug it in into any web table)
  • Supports validation and change events (so you can warn about invalid input or prevent invalid changes)
  • Uses standard DOM focus for selection (so does not interrupt scrolling or tabbing outside the table)
  • Native copy/paste support
  • Does not force any styling (so you can style it any way you want, using normal CSS)
  • Works well with Bootstrap
  • Depends only on jQuery

appendGrid : Dynamic table input jQuery plugin

appendGrid : Dynamic table input jQuery plugin

AppendGrid allow you to input structured data row by row such like filling spreadsheets. It allows you to add/remove/insert/delete row in the grid. The generated input/select/textarea controls are well named for submitting to server side applications such as ASP.NET/PHP/JSP. Multiple options and callback events are available to fit every situation.

Features:

  • Easy to use
  • jQuery UI widgets supported
  • Multiple build-in input types included HTML5 input types
  • Customizable input types
  • Major web browser supported
  • Ready for internationalization

jQuery Sticky Table Headers & Columns

jQuery Sticky Table Headers & Columns

A tutorial on how to create sticky headers and columns for tables using jQuery. The solution is an alternative to other sticky table header approaches and it addresses the overflowing table problem including adding support for biaxial headers.

Multifilter : jQuery Plugin to Sort a table on Multiple inputs

Multifilter : jQuery Plugin to Sort a table on Multiple inputs

Multifilter is a jQuery plugin to let you filter a table based on multiple inputs.Check it out below demo.It’s pretty sweet.



Best jQuery websites design awards