DevSnippets » Tables

15 Great jQuery Plugins For Better Table Manipulation

dicky83 — Mon, 07 Sep 2009 13:32:49 +0000

Tables are great for comparison purpose, but it is difficult to style and less cross browser compatible. This article shares 15 great jQuery plugins for better table manipulation.

Decision Maker – Easily build decision guides and trouble shooters with this jQuery script.

tdomf_661f8 — Sat, 18 Jul 2009 05:03:44 +0000

Business processes are getting increasingly more complex. To help people perform processes correctly we often resort to training or providing some type of reference material. that’s typically on the corporate intranet. Since the processes are often governed by a complex set of rules a person must read and remember all the different conditions and rules that must be applied to a process. If the process is complicated and not performed very often, the error rate goes up along with the number of support calls.

This article presents a technique that uses a jQuery function to enable process experts to create decision guide or trouble shooter by simply entering information in an HTML table using a visual web page editor. When the page is viewed, the jQuery script reads the table and presents the first question along with the options.

When a person clicks an option/answer, the script finds and presents the next question. This continues until the final answer is found. Each question is displayed below the previous question so a person can see the flow of questions and quickly take another course by skipping back to the first or any previous question.

Here is what the table might look like.

# Question/Heading Options/Answer
1 What’s wrong with the printer
It does not print
It prints but the text is too light
The paper is crimpled
It doesn’t print the whole document
2 Does the printer make any noise?
It does not make any noise
It makes a loud and unusual noise
It makes the normal noise
3 How light is the print?
It’s not readable
The colors aren’t right
It’s readable but not as dark as expected
4 The printer needs to be replaced. Follow these procedures for requesting a replacement printer.

The first column contains unique number from 1 to whatever is required. The second column contains the questions or a heading for a final answer. The 3rd column contains a bullet list of options for each question or the final answer. Each of the options in the bullet list has an id attribute that matches the number of the table row that’s presented when the bullet item is clicked. The HTML would be

The paper is crimpled

. Since many visual editors allow authors to add attribute values it would not be necessary for an author to view the HTML code.

View example

To utilize the script you need to:

Add a link to the jQuery js file
Copy and paste the function and css from the example page
Add a table with id=”questions” in the table tag.
Have an expert enter the questions and answers.
Including an “Don’t know” or “Not sure” option/answer with each question provides an opportunity to present information about how to find an answer to a question.

This electronic performance support system (EPSS) can help you to reduce process errors, improve service, and reduce support calls.

Dynamic Drag’n Drop With jQuery And PHP

tdomf_661f8 — Thu, 07 May 2009 08:52:19 +0000

Drag’n drop generally looks hard-to-apply but it is definitely not by using JavaScript frameworks. Here is, how it is done by using jQuery & jQuery UI.

20 excellent footer designs

tdomf_661f8 — Sun, 25 Jan 2009 23:39:33 +0000

If you are looking for some inspiration of well designed footers, look at this list. I think, footer is so important part of your web design.

The Big Table Issue

Noura Yehia — Sat, 10 Jan 2009 15:02:42 +0000

In the perfect world of a web developer’s life, a data table would have a few columns and rows so it’d fit perfectly in our content area and blends with the rest of the UI elements seamlessly. But in reality, a data table can get very big and ugly especially in financial web applications.
A look at a common web application UI challenge

Tablecloth :style your tables

dnamic — Thu, 21 Aug 2008 10:43:19 +0000

Tablecloth is lightweight,unobtrusive way to add style and behaviour to your html table.

Creating a table with dynamically highlighted columns

Noura Yehia — Sat, 16 Aug 2008 13:43:58 +0000

How to create a table like Crazy Egg’s pricing table on their Pricing & Signup page. This tutorial will show you how to recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.

Sortable table (with inline edit)

Shazza — Thu, 14 Aug 2008 10:45:07 +0000

DrasticGrid is an Ajax-based datagrid with editing support. It uses MySQL as a data source and it supports pagination, sorting, editing records, adding records and removing records. Pagination is implemented efficiently, only the visible data is sent to the browser. The grid is configurable in many ways, you may specify which columns are shown, and which are editable.

jQuery Column Filters

Noura Yehia — Thu, 14 Aug 2008 10:36:00 +0000

jQuery plugin for a quick way of allowing table columns to be filtered by the user. It will add text box’s to the top of each column in a table, by typing into the text box’s you can narrow the number of rows in the table down to those that match your search text.