FnF?
Private Social Media
Had it with Facebook and Twitter?

Try out 'Friends and Family' - FnF, an alternative system for use by private groups.

Mobile friendly.

Simple installation designed to work with shared hostings.

No advertising, no annoying notifications.

Demo available here.

Getting Started with Datatables - Populating via AJAX.

If you're reading this then you are presumably already including jquery.js in your pages, so you might also be interested to read my notes on Getting Started with jQuery Plugins.

Introduction.

Having started on this Datatables tack I thought I'd add something else that I wanted to do, got working quite quickly, but never quite understood until I made myself write this. It might be useful to others.

The topic here is population of the table from an external source via AJAX.

There are some philosophical points in this process, which I'll summarize as "MIME types required."

Nitty Gritty.

The first thing we need to do is to modify the initialization of the table to tell it how to get the data. We'll start with a plain old text file.

$(function() {
   $('#mytable').dataTable( {
      "sAjaxSource": '/software/dtgs/init.txt'
   });
   $('#mytable tbody').delegate("tr", "click", rowClick);
});
The contents of this file can be:

{ "aaData": [
   [1, 2],
   [11, 22],
   [111, 222]
] }
This is what 'sAjaxSource' expects - an array of arrays of data, where the inner arrays contain the data for each row.

Then we need to strip out the existing table contents so we're left with just:


<table id="mytable" style="margin:20px 0px 20px 0px;">
<thead>
<tr><th>One</th><th>Two</th></tr>
</thead>
<tbody>
</tbody>
</table>
When we've done that we have dt107.html, the result of which can be seen here.

We should get exactly the same result if we change our initialization to:


$(function() {
   $('#mytable').dataTable( {
      "sAjaxSource": '/software/php/poptable.php'
   });
   $('#mytable tbody').delegate("tr", "click", rowClick);
});
where the PHP file is:

<?php
$data = "{ "aaData": [[1, 2], [11, 22], [111, 222]] }";

header("content-type: text/plain");
header("Pragma: no-cache");
header("Expires: 0");
echo($data);
?>
This is so, and the implication is that when the web server serves up a text file it labels it as "Content-type: text/plain".

However, if we change the PHP file so that it says: header("content-type: application/json"); Then the result is exactly the same. Datatables looks after it for us. So far, so good, and no great surprises. However, when I'm talking about populating the table, I'm also interested in repopulating it. And there we are left rather more to our own devices.

Re-population is nominally straightforward. We need something like:


var oTable;

function refresh()
{
   var url = "/php/poptable2.php";
   // poptable2.php is the same as poptable.php, but with an extra row
   $.get(url, function(data) { doRefresh(data) });
}

function doRefresh(data)
{
   // Get the aaData object from the JSON response

   oTable.fnClearTable();
   if (aaData.length)
      oTable.fnAddData(aaData);
   oTable.fnDraw();
}
Note that I've added another global variable - oTable - to hold a reference to the table object for use during the refresh. Don't forget to add that to the initialization code:

$(function() {
   oTable = $('#mytable').dataTable( {
      "sAjaxSource": '/software/php/poptable.php'
   });
   $('#mytable tbody').delegate("tr", "click", rowClick);
});
We'll also have to add something to dt107.html to provoke a refresh, like:

<button onclick="refresh();">Click to refresh</button>
Actually, to make that look sensible, you have to do a little more, but you can see what that is in the HTML for dt108.

So we're down to "Get the aaData object from the JSON response." How we do that depends on the MIME type in our PHP file. If we use 'text/plain' then what we need is:


function doRefresh(data)
{
   // data is a string
   data = jQuery.parseJSON(data);

   oTable.fnClearTable();
   if (data.aaData.length)
      oTable.fnAddData(data.aaData);
   oTable.fnDraw();
}
Otherwise - MIME type 'application/json' we must use:

function doRefresh(data)
{
   // jQuery.get() checked the MIME type, and parsed the JSON for us - data is an object

   oTable.fnClearTable();
   if (data.aaData.length)
      oTable.fnAddData(data.aaData);
   oTable.fnDraw();
}
Check out the completed dt108.