Watajax - A fast ajax jquery plug-in and a PHP data generator.

Wa(West Art) Ta(Table) Jax(Ajax)

This plug-in / php-data-generator combination was created when we could not find any easy-to-implement fast and non-complex alternatives. We are searching for developers who wish to help out in the future development. Please contact us if you are interested: christoffer@westart.se.

Features

Fast (tested on 500,000+ rows)
UI features: floating pager, searchbox, sortable titles
Flexible
Simple to use

The code was created by West Art Communication AB wich is a Swedish web design agency. Checkout with SVN

Example

php

There are two basic ways of using the included PHP data generator depending on what kind of data you want to show in your table. One for regular PHP generated arrays and one for MySQL table data. This example will show the MySQL one.

Remember to connect to your database first
What table to read data from is chosen in the javascript when you enable watajax
You set what columns to show and how they should be handled in the PHP part ($Watajax->columns)

<?php
  // Connect to the database first if you plan on using the Sql version of Watajax.

  require_once("lib/Watajax.class.php");
  $Watajax = new WatajaxSql();
  $Watajax->columns = array(
    "id" => array("name" => "#", "sort_type" => "numeric", "hide" => true),
    "firstname" => array("name" => "First name", "transform" => '<img src="'.URI.'/images/icons/vcard.png" valign="absmiddle" /> !firstname'),
    "lastname" => array("name" => "Last name"),
    "email" => array("name" => "E-mail adress", "transform" => '<a href="show_reciptient.php?id=!id">!email</a>'),
    "tools" => array("name" => "", "virtual" => true, "transform" => '<a href="edit.php?id=!id">edit</a>'));
  $Watajax->run();
?>

HTML/javascript

Load jquery and the watajax plugin

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.watajax.js"></script>

Create a div/container for your to-be table in the

<body>

section of the page

<div id="watajax_table"></div>

Initialize the table. You have several options available. The most important ones to take notice of is ajax_connector that must point to your php-file (or other data source), and table_id that will deside what table to get data from. Those will be described later. You can always see them in the top of jquery.watajax.js file.

<script type="text/javascript">
  $(document).ready(function() {
    $("#watajax_table").watajax({ajax_connector:"ajax.php", table_id: "contacts"});
  })
</script>