background preloader

jQuery Table

Facebook Twitter

Dobtco/jquery-resizable-columns. Jiren/StreamTable.js. Ludo.is. Quick links: download, documentation and examples.

ludo.is

The jQuery treetable plugin enables rendering a tree structure in a column of an HTML table. When I wrote the original treetable plugin back in 2008 I was still fairly new to creating jQuery plugins. In the meantime I have learned a lot more about jQuery plugin authoring and I wanted to apply this knowledge to the treetable plugin. The result of this is version 3.0 which has been completely rewritten with performance and compatibility with other plugins in mind. Notable Changes Most of the features from version 2.0 are still there but the way the plugin is used has changed significantly. Data- Attributes for Metadata data-attributes are used for the tree metadata, instead of the id and class attributes used (abused) in previous versions. jQuery treetable. Download the latest release from the jQuery Plugin Registry or grab the source code from Github.

jQuery treetable

Please report issues through Github issues. This plugin is released under both the MIT and the GPLv2 license by Ludo van den Boom. Table of Contents 1. Overview jQuery treetable is a plugin for jQuery, the 'Write Less, Do More, JavaScript Library'. Unobtrusiveness. Pure CSS Scrollable Table with Fixed Header. AciTree - A treeview control with jQuery. AciTree demo - A treeview control with jQuery. Here you have a simple implementation of a file system tree with the most features available to be changed at the runtime from the interface (see the tree view/right form elements on the bottom of the page).

aciTree demo - A treeview control with jQuery

You can find a simple PHP implementation in the download but any server-side language can be used because aciTree needs the data in JSON format and it's using AJAX to load the children of a inner node (once they are needed). Note: I recommend checking the code from the other demos as this page can be complex for someone new to aciTree. Also, do not forget to check the API docs before you try using the methods and also check online on the plugin page for extra info (like the plugin init options and how to use the events).

New to aciTree? Note: in the demo below - the node loading it's made with a delay so you can see the loading animation. Hover over a tree item to show his info (using the aciTree API) ... Test JavaScript code performance:(see the log for output) Sorttable: Make all your tables sortable. While the web design community gradually moves away from using tables to lay out the structure of a page, tables really do have a vital use, their original use; they're for laying out tabular data.

sorttable: Make all your tables sortable

For instance, imagine a table of employees. Pretty simple. But if you saw that table in a client-side application, you'd expect to be able to click on the headers and have the table sort, would you not? I know it always annoys me when you can't. A fair few web applications do allow this; most of them, which are pulling this data by submitting a SQL query to a relational database (an environment eminently suited to tabular data) implement this by resubmitting the whole page with something like ordercolumn=4 in the URL, and then adding an ORDER BY clause to their SQL query to return the data from the DB ordered by the specified column. Table Drag and Drop JQuery plugin. Why have another plugin?

Table Drag and Drop JQuery plugin

Dragging and dropping rows within a table can’t be handled by general purpose drag and drop utilities for a number of reasons, not least because you need to move the whole row, not just the cell that receives the mouse events. Re-parenting the row also requires specific code. Sadly also, effects like fadeIn and fadeOut don’t work well with table rows on all browsers, so we have to go for simpler effects. What does it do? This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example).

How do I use it? .sorttable Examples. Dragtable: Visually reorder all your table columns. Dragtable: Visually reorder all your table columns Over the past several years, Stuart Langridge’s sorttable Javascript library has found widespread use.

dragtable: Visually reorder all your table columns

It’s easy to see why. Just add class=sortable to a table tag and its column headers automatically support click to sort. Pretty slick. SortTables Responsive. TinyTable. jQuery plugin: Tablesorter 2.0. Author: Christian Bach Version: 2.0.5 (changelog) Licence: Dual licensed (just pick!)

jQuery plugin: Tablesorter 2.0

Under MIT or GPL licenses. Please with sugar on top! Don't hotlink the tablesorter.js files. Download it and host it on your servers. Update! Helping out! Comments and love letters can be sent to: christian@tablesorter.comchristian at tablesorter dot com. 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. Multi-column sorting Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. TIP! jQuery Scrollable Table Plugin. This jQuery plugin converts a properly formatted table, having thead and tbody elements (tfoot optional), into a scrollable table.

jQuery Scrollable Table Plugin

Scrollable tables are most useful when having to display lots of tubular data in a fixed space.