With basic HTML tables, the structure and the way the table are presented inherits the native html style. And if you like to change it then you need to change the underlying HTML code or spend time in adding attributes to all tables tags, in order to style it with CSS . But what if you want to make the tables more interesting, more dynamic, more visual appealing without spending so much time. Yes you can certainly use JavaScript for this, but coding it from scratch will be time consuming and it’s not worth. But JS libraries/frameworks will allow you to add a range of dynamic behavior to your tables and manipulate it for better presentation on a webpage without spending much time. We decided to list a few for the benefit of those who intend to use tables with JavaScript(JS). Most of these are for the popular jQuery, MooTools and Prototype/script.aculo.us JS frameworks. Since most of the JS frameworks mentioned below are plug-ins that work on top of existing JS frameworks, it is recommended that you take a look at those base frameworks first. But there are a few others that do not require an existing JS frameworks.

Solutions Based on jQuery

Flexigrid

Flexigrid is a lightweight plug-in for jQuery that converts an ordinary HTML table into an extremely flexible and feature-rich datagrid (or Flexigrid). Resizable columns, ability to connect to an XML data source through AJAX, data scrolling, search, pagination, themes, and the ability to add a toolbar are some of its features.

tablesorter

tablesorter is a jQuery plug-in 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. It has a number of interesting features including: multi-column sorting; support for secondary hidden sorting; preloaded sorters for text, URLs, integers, currency, etc. – your own can be added easily; cross-browser support (except Chrome); and the system is easily extensible via the widget system.

TableRowCheckboxToggle

This is a plug-in that generically adds the toggle checkbox function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. You can also manually exclude checkboxes based on various criteria: name, id, or CSS classes. And more. See the live Demo here.

TableEditor

TableEditor provides flexible in place editing of HTML tables.

ingrid

ingrid is a jQuery datagrid plug-in. It makes it possible to achieve a number of datagrid behaviors such as column resizing, paging, sorting, row and column styling, etc. Take a look at the examples page to see some of the possibilities.

columnManager

columnManager is a jQuery plug-in that enables you to toggle the visibility of table columns (collapsing / expanding) and also to save the state of the table until the user’s next visit to the webpage.

DataTables

DataTables is a plug-in that adds advanced interaction tools to your HTML tables. These include: on-the-fly sorting; multi-column sorting with automatic detection of data types; variable length pagination; and an extensible API to add more features of your own. It can display data from almost any data source – DOM, JS array, AJAX files and supports Server-side processing (PHP, C#, Perl, Ruby, AIR, Gears, …). Tables can also be themed by CSS or jQuery UI ThemeRoller.

uiTableFilter

uiTableFilter by Greg Weber is a jQuery plug-in for filtering table rows. The arrows at the top of each column enable you to sort accordingly. He has also created another great plug-in uiTableFilter, which makes tables editable by users.

Scrollable HTML Table

Convert ordinary HTML tables into Scrollable HTML Tables.

JQTreeTable

JQTreeTable enables you to have a tree-view for an ordinary HTML table. It also has graceful degradation inasmuch as, once the browser’s JS is turned off, the plain HTML table view is maintained.

CSV2Table

A plug-in that helps to load a CSV file and load the data values directly into a table.

Table Pagination

This can help to create a pagination element at the bottom of a table.

Table Drag and Drop

Pretty self-explanatory name: enables users to reorder rows according to their own criteria (for example priority). Individual rows can be marked as non-draggable and/or non-droppable (i.e. other rows cannot be dropped on to them).

Solutions Based on MooTools

OmniGrid

OmniGrid is a plug-in for the MooTools JS framework that can add a rich set of functionality to your data grids and HTML tables. These functionality include: pagination; Server-side and Client-side sorting; resizable columns; connection to back-end databases through AJAX; multiple selection and more. It has been inspired, according to its author, Marko Šantic, by Flexigrid (see above) and PhatFusion’s sortableTable (see below).

TableGear

TableGear is a MooTools+PHP powered component that enables you to manipulated data on the web in various ways. It helps you easily create interactive HTML tables. Features include: sorting; the ability to add and delete rows on-the-fly; keyboard shortcuts; graceful degradation to simple tables in the absence of JS capability on a browser; data loading through AJAX and POST; and is fully XHTML compliant.

Phatfusion Sortable Table

Phatfusion’s sortableTable enables you to sort and filter HTML tables. Sorting can be done on numbers, strings, dates and currency. Filtering can be done on columns.

Zebra Tables

Zebra Tables, developed by David Walsh, is a MooTools plug-in that implements “Zebra” presentation on ordinary tables (i.e. alternate rows are different colors).

mootable

mootable enables conversion of an ordinary HTML table into what the author’s call a mootable, which is simply saying that the table now will have interactive capabilities such as sorting, resizable columns, and the ability to hide/show columns. They degrade gracefully because they are still simple HTML tables at heart.

Solutions Based on Prototype

TableKit

This is a whole set of enhancements for HTML tables. It implements a number of functionality including: column sorting, column resizing, row striping, user cell editing using AJAX, and more.

Solutions Based on Yahoo! UI

YUI DataTables

The Yahoo! UI (YUI) people provide their own control for making powerful HTML tables which is called DataTable. YUI DataTables has pretty advanced functionality: sorting; user cell editing; pagination; scrolling; row, cell and column selection; ability to hide, show, insert or delete columns; and more.

Solutions that Do Not Depend on an Existing Framework

KeyTable

Although KeyTable has a couple of jQuery components, since they are just two it can be easily be made to work with other JS frameworks. It takes any simple HTML table and is able to add things such as keyboard-based navigation and event bindings. The author (Allan Jardine) calls this Excel style navigation, because the table entries can be edited without the use of a mouse. The current cell is highlighted (see below) using event handling functions through the API: “focus” – when a cell is highlighted; “blur” – when user navigates away from the highlighted cell; “return” – when user hits a return key for the current cell; and “esc” – when user hits the escape key.

Tablecloth

Tablecloth is a lightweight, easy to use, and unobtrusive way to add style and behavior to html table elements. Tablecloth searches your HTML source for table elements and processes each one individually. It is easily extensible with the function that gets called when the user clicks on a table cell being editable.

TinyTable

At a 2.5KB download size this is an extremely lightweight solution, that adds a number of attractive features to simple HTML tables which include the following: alternate row highlighting; header class toggling; auto data type recognition; selective column sorting; column highlighting; optional pagination; support for links; and date/link parsing. See the live demo here.

DrasticData

This is an exciting PHP/JS/MySQL based open source package with an AJAX-based datagrid, which comes with editing support, a configurable tag cloud and even a Google Mapping component. See the host of examples for what is possible. The example below shows reverse sorted “Continent” column and hitting the red “x” on row 6 has brought up the dialog box. Check out other examples at the homepage.

JavaScripTools

JavaScripTools is a collection of useful JS components, functions, and classes with the aim of simplifying the web developer’s task. Its features include parsers/formatters for various data types. In particular, it comes with a dynamic table function that is useful for creating sortable HTML tables.

Standardista Table Sorting

This is a JS module that allows to take an HTML data table and make it sortable by any column. Sorting can be done on various data types including IP addresses, Currency, numbers, Plain text, and dates. The example shows the “price” column sorted.

Unobtrusive Table Actions Script

The author’s goal was to create a solution which was not tied to any underlying JS framework and so we get the Unobtrusive Table Actions Script. This has a number of useful features including: “Zebra” striping of rows; row hover, cell hover, and column hover effects; table rows can be selected on click and the behavior on click can be programmed via a callback function, allowing for flexibility for the web developer; row and column highlighting and selection; and the ability to hyperlink cell contents. See example below: row 6 has been selected; the mouse pointer is actually on row 10 and column 2 causing that to be highlighted as also the entire row; finally, there is a hyperlink at cell (1,1).

sorttable

sorttable is a JS framework that enables you to convert all your HTML tables and make them sortable (see example below – name column is reverse sorted). sorttable uses DOM, sorts a number of different data types and it is completely unobtrusive.

dragtable

As its name suggest dragtable makes table columns draggable. Users can now change the order of table columns by dragging them wherever they need to. Enable users to change order of table columns by simply dragging them. It can and is meant to be used in conjunction with sorttable.

AdPrelanté offers Quality Outsourcing – HTML, CSS, jQuery, WordPress,VFX & Motion Graphics – Prelanté

Small code snippet that will allow you to display random images, every time the page loads. Major advantage of using it is that you no longer have to make use of scripts (JavaScript) which can be bulky, especially on the older browsers. Though we have used this code with images only, it can be easily used for any other object to be displayed in random order. It’s more of PHP than Wordpress.

Code

Place this code anywhere in your Wordpress template – header, footer, etc, with appropriate changes to CSS.

<div id="image<?php echo rand(1,4); ?>"></div>
 

Change (1,4) depending upon the number of images.

CSS

Add this CSS code to the Wordpress template CSS file.

#image1 {
background:url(img/image1.jpg);
width:500px;
height:100px;
}
#image2 {
background:url(img/image2.jpg);
width:500px;
height:100px;
}
#image3 {
background:url(img/image3.jpg);
width:500px;
height:100px;
}
#image4 {
background:url(img/image4.jpg);
width:500px;
height:100px;
}
 

For long now flash has been dominating the interactive web animation, using JavaScript was a daunting task. But introduction of frameworks like jQuery, MooTools, Scriptaculous, etc have made animating web component much easier. Another advantage of using these frameworks over flash is that they are search engine friendly. Though search engine do not index JavaScript, actual content is present in html or other SEO friendly code.

You must have seen this text effect on many flash websites. jTicker is a jQuery plugin that can be used for creating such effect without the use of flash. This effect comes in handy when you want to force the visitor to read the text. But should be used wherever necessary, as the usability suffers. jTicker can be declared on any element and can be stylized using CSS. You can also use event buttons to play, stop and control the speed of the effect.

HTML

Let us start with html markup. Make sure that you have linked the .js files correctly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jticker | Demo</title>
<script type="text/javascript" SRC="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" SRC="js/jquery.jticker.js"></script>
</head>
<body>
<div id="content">
  <h2>jTicker Demo  </h2>
  <div id="ticker">
    <div>
      <h3>What does jTicker do?</h3>
        <p>jTicker takes an elements' children and displays them one by one, in sequence, writing their text 'ticker tape' style. It is smart enough to ticker text from an element heirarchy, inserting elements back into the DOM tree as it needs them. That means almost any content can be 'tickered'.</p>
        <p>It can be controlled with jQuery events.</p>
        <a class="next" href="#">next</a>
    </div>
    <div>
      <h3>Not my cup of tea, really, ...</h3>
        <p>annoying little blinky things trying to distract attention when you want to get on with the serious business of reading a website, but if it's your thing, here it is.</p>

        <a class="next" href="#">next</a>
    </div>
    <div>
        <h3>jTicker has some neat features:</h3>
        <ul>
        	<li>jTicker can be declared on any element, and it respects that element's DOM tree, printing it back out with the same hierarchy.</li>
            <li>jTicker handles any number of alternating cursors (or just one).</li>

            <li>jTicker's cursor container is styleable using the class .cursor, or can be defined as your own jQuery object</li>
            <li>jTicker reacts to jQuery events "play", "stop" and "control". You can try them out below.</li>
        </ul>
        <a class="next" href="#">next</a>
    </div>

    <div>
        <h3>There is one caveat:</h3>

        <ul>
            <li><span>jTicker can't understand text and children at the same level (I don't know how to do that yet), so if you want some text and then a link, you have to wrap the text in, say, a span, like this:</span>
                <code>|span| some text |/span| |a|and then a link|/a|</code>
            </li>
            <li>But obviously not with those brackets. That's another thing, jTicker is not good at handling html character entities. So make that two caveats.</li>
        </ul>
        <a class="next" href="#">next</a>
    </div>
  </div>
</div>
</body>
</html>
 

CSS

Add this code to your CSS file or to the <style>

  #ticker
    {height: 12em; padding: 0.6em 0; margin: 0 0 1.8em 0; border-top:3px solid #efefef; border-bottom:3px solid #efefef; position: relative;}
  #ticker .cursor
    {display: inline-block; background: #565c61; width: 0.6em; height: 1em; text-align: center;}
  #ticker p
    {margin-bottom: 0.8em;}
  #ticker code
    {margin: 0.4em 0.4em; display: block;}
  #ticker .next
    {position: absolute; bottom: 1em;}

JavaScript

Now initialize jTicker by adding this JavaScript to <head> between <script type=”text/javascript”></script>

<!--
  jQuery(document).ready(function(){
    // Instantiate jTicker
	jQuery("#ticker").ticker({
 		cursorList:  " ",
 		rate:        10,
 		delay:       4000
	}).trigger("play").trigger("stop");

    // Trigger events
    jQuery(".stop").click(function(){
        jQuery("#ticker").trigger("stop");
        return false;
    });

    jQuery(".play").click(function(){
        jQuery("#ticker").trigger("play");
        return false;
    });

    jQuery(".speedup").click(function(){
        jQuery("#ticker")
        .trigger({
            type: "control",
            item: 0,
            rate: 10,
            delay: 4000
        })
        return false;
    });

    jQuery(".slowdown").click(function(){
        jQuery("#ticker")
        .trigger({
            type: "control",
            item: 0,
            rate: 90,
            delay: 8000
        })
        return false;
    });

    jQuery(".next").live("click", function(){
        jQuery("#ticker")
        .trigger({type: "play"})
        .trigger({type: "stop"});
        return false;
    });

    jQuery(".style").click(function(){
        jQuery("#ticker")
        .trigger({
            type: "control",
            cursor: jQuery("#ticker").data("ticker").cursor.css({width: "4em", background: "#efefef", position: "relative", top: "1em", left: "-1em"})
        })
        return false;
    });

  });

//-->

View Demo

Download Files

Visit Authors Website