AJAX Table - A Drupal Module

AJAX Table Overview

The Ajax Table module is an API-based tool that will allow other modules to create ajax-refreshable tables by supplying a few parameters. There are some handy utilities built in that aid in managing data more quickly than many Drupal modules offer by default. With an Ajax Table, it is easy to add ajax-based input columns to change data on the fly. There is also a utility that works similarly to an auto-complete field, but displays results in a fully customizable Ajax table, which supports pagination and in-place editing.


Multiple search inputs, complex column dataMultiple search inputs, complex column data

In this example, you can see multiple search inputs. The user can search via date, the node ID, the user ID, or a general textual search. Also, this is a good example of using callbacks to display formatted data in a column.

Using the Cluetip moduleUsing the Cluetip module

This is a demonstration of the Cluetip hover-over module integrates with AJAX Table.

Using AJAX Table as an input - Before searchingUsing AJAX Table as an input - Before searching

When using AJAX Table as an auto-complete input, this is how it would look before a search.

Using AJAX Table for an input - After searchingUsing AJAX Table for an input - After searching

And this is when a search is rendered.

Example of different input column typesExample of different input column types

This is an example of how different input columns can be used to manipulate data via AJAX. Currently, there are widgets for text, checkbox, select and calendar inputs.

Benefits of Ajax Table:

  • Allows users to browse quickly through data without numerous page loads.
  • API-based, so it requires little code to do some heavy lifting.
  • Specify which columns are searchable, and it will generate a search box automatically to search those columns.
  • Easily add more specific search criteria like a date range, or title matching. Searches are still loaded via AJAX.
  • AJAX-based pagination
  • Easy API to create 'input columns', where you can create columns that will alter data via AJAX. One example would be a checkbox to mark a node as published.
  • Integrated 'edit' and 'delete' columns if specified. If the table is browsing nodes or users, it's just a matter of adding a parameter to add 'edit' and 'delete' columns. For quick testing, the delete column will delete via AJAX as well.
  • Integration with JS Tools pop-up calendar, which allows easier input of date-based search criteria or ajax-based data editing.
  • Completely themable. While you can change the visual appearance of an AJAX table via CSS, you can also specify an actual layout as well. There are two core themes that come with AJAX table, but another module can easily specify additional themes. Themes can also be overridden on a per-table basis.
  • Includes utilities to add an auto-complete style input to forms. The input is rendered as a radio box, rather than a 'click-to-add-to-input' style. This can help reduce confusion and limit the choices of a user to what is actually available in a database table. Also, since it works just like an AJAX table, you can use all the other utilities available.
  • Decent documentation exists. AJAX table comes with a module called Ajaxtable Docs that includes a number of examples and code snippets.
  • Integration with a hover-over tooltip module called Cluetip for easy-to-read and flexible integrated help.


Releases of the AJAX Table module can be found at http://drupal.org/project/ajaxtable.


We will be adding more documentation to this section soon, but for now comprehensive documentation is bundled with the AJAX Table module in the Ajaxtable Docs module.

Implied By Design Logo