Most people have turned their back to tables for implementing web page layouts. This is because tables compared to table-less layout beased on CSS Positioning has several disadvantages. But tables are not useless at all! They should just be used to render tabular data as they originally was designed for. By adding a bit of jQuery you will be able to create very useful solutions with html tables that your users will find easy and intuitive to use.
PicNet JQuery Table Filter
This plugin adds a row to the section of a table and adds filters that allows real time filtering of tabular data. Please see the home page for full details.
TinySort
A plugin to sort child nodes by (sub) contents or attributes. Very useful for ordering unordered lists or tables, but works on any type of node. Download it to get documentation and examples.It doesn’t get easier to sort fx. listsbut it is also possible to apply more complex sorting logic:
$(”li”).tsort();
$(”ul#people>li”).tsort();
$(”ul#people>li”).tsort(”img”,{order:”desc”,attr:”alt”});
Graph data from an HTML table using jQuery and flot
Draw graphs from html tables. graphTable() takes up to two objects as arguments: the first is an object with the arguments for graphTable; the second is an object with arguments to be handed off to flotjLINQ
If you’ve used the .NET Framework, chances are you’ve also used LINQ. The features found in LINQ allow you to work with collections in-memory to query, sort and manage data, much like you would with a SQL command. LINQ also allows you to connect directly to a database to manage records all within your IDE.
jLINQ works like .NET LINQ and lets you use commands to query collections that are in memory. jLINQ copies many of the same commands you find in LINQ like skip or take along with certain aggregate functions like sum.
Floating header plugin
A jQuery plugin that makes the header of a table floating if the original header isn’t visible due to scrolling. The plugin will automatically choose the thead tag as the header for a table. If thead isn’t found it will search for rows marked with the class ‘floating’. The behavior can be changed by setting the option forceClass to true.
jExpand
jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.
columnHover
columnHover lets you highlight whole columns in a table when hovering over them.
Scrollable HTML Table
Scrollable HTML Table plugin for jQuery able to convert a table into scrollable.
DataTables
DataTables is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Some key features include: variable length pagination, on-the-fly filtering, and multi-column sorting with data type detection.
HeatColor
HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element. The derived value is compared to a range of values, either determined automatically or passed in, and the element is assigned a “heat” color based on its derived value’s position within the range.
Fixed Header Tables
Fixed Header Tables takes valid table HTML and builds a fixed header and scrolling body with optional footer.
Colorize – jQuery Table Plugin
Colorize is a jQuery plugin to add background color to alternate HTML table rows, highlight a row/column on mouse over, and colorize a row/column when you click your mouse button over it. You can colorize as many table rows or columns as you want. A repeat mouse click reverts the row/column to the original background color.
Flexigrid
Flexigrid gives you a lightweight but rich data grid with resizable columns and scrolling data to match the headers. It also has the ability to connect to an xml based data source using Ajax to load the content.
jQuery TableRowCheckboxToggle
This plugin can add toggle checkbox to any rows that can be specified through the CSS class names.
Striping Your Tables the OO Way
This demonstartion is an adaptation of a well written snippet of code by Mathew Pennell – “Striping Your Tables the OO Way”
Ingrid
Ingrid is an unobtrusive jQuery plugin that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.
JQTreeTable
With JQTreeTable, you can have a treeview in your table. With this plugin, users still get the plain table even thought they disable Javascript.
rowSelect
Simple little plugin to allow selecting of rows (single or multi) in a table.
treeTable 2.0
treeTable allows you to turn a column in your table into a tree. One notable feature is the ability to move an entire branch in the tree by dragging and dropping.
Tablesorter
Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. Tablesorter can successfully parse and sort many types of data including linked data in a cell.
NReco jSquared
jSquared is a jQuery plugin that enables ability to add/remove HTML table columns and rows ‘on-the-fly’. Its functionality is very similar to Google Squared UI and useful for building advanced search interfaces.
Table Pagination
This jquery plugin is used to create a pagination element under a table element. You can customize your pagination needs through various settings.
columnManager
columnManager allows you to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit.
Table Drag and Drop
Table Drag and Drop allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can’t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.
Chromatable
Chromatable allows you to easily create scrolling tables with fixed headers.
uiTableFilter
uiTableFilter is a plugin that makes filtering table rows very easy.
No comments:
Post a Comment