kae's site: datatables
The original function was written by myself, but a lot of work was donated by Douglas Hurst, particularly on accessibility, and source cleanup.
The great power of this function is in it's simplicity of use - the most basic method to create a fully functional database using this is to simply place the function file in your main directory, create a data directory with full write permissions, and then simply call the function from within a php file. Here, for example, is an extremely simple source-file:
<html><body> <? include("../../../../programming/datatables/kverens_subdomain/datatable.functions.txt"); datatable("test1","name|address|phone number"); ?> </body></html>
This file can be seen in action here.
The above call creates a database that can be edited, appended, deleted, et cetera, by anyone. Note that the field names are separated by the symbol '|'.
datatable() call has three parameters.
- The first is the filename to read/write from/to (the data file)
- The second is the field information so the table knows what to describe each piece of data as.
- The third parameter (optional) gives you the option to allow or disallow edits.
If you wanted to create something like a guestbook, you would not want people to go in and edit already entered data, so you could take out that ability by using the third parameter.
|add||allows new data to be entered||'yes','no'||'yes'|
|edit||allows existing data to be edited||'yes','no'||'yes'|
|delete||allows existing data to be deleted||'yes','no'||'yes'|
|records||number of records displayed per page||a number||20|
If you merely wanted to display the data, and not allow other people to edit it, then you just turn off the editable options:
<html><body> <? include("../../../../programming/datatables/kverens_subdomain/datatable.functions.txt"); datatable("test1","name|address|phone number","edit=no|add=no|delete=no"); ?> </body></html>
An example of the above can be seen here.
The table as is is very plain. If you wanted to spruce it up a bit, you can change the Parameter 2 settings.
Each field mentioned in the parameter is defined as a group of strings separated by the '|' character.
To stick to the basics, you can use just about any character but the '|' and '=' characters. If no '=' is found, then the name of the field is the entire field string. As soon as you put a '=' in, though, you follow these rules:
Field strings can be broken down to more options. The options are delimited by the ',' character, and each option is a pair of words separated by a '='. The left word is the name of the option, and the right word is the value.
|name||The name allocated to the field. This is displayed to the reader, so make it obvious.||Anything, really||The entire field string|
|bgcolor||background color of the table cells of that field||any valid RGB color||none|
|textcolor||text color for the table cells||any valid RGB color||none|
An example of the test database formatted with different colours is:
<html><body> <? include("../../../../programming/datatables/kverens_subdomain/datatable.functions.txt"); datatable("test1", "name=name,bgcolor=#000000,textcolor=#FFFF00|name=address,bgcolor=#808080|phone number", "edit=no|add=no|delete=no"); ?> </body></html>
An example of the above can be found here.
..and an editable example of the above can be found here.
The inline styling options of parameter 2 may be dropped, as CSS is a cleaner method to do it.
The datatable, once displayed, has these ids associated with it:
- datatable - the overall datatable.
- datatableForm - the data entry form.
- datatablecredits - the little message linking to here.
- the data entry forms have ids analogous to their names minus spaces.
Also, there are classes created for the datatable.
- datatableData - the individual recordsets.
With a bit of experience in CSS, you can affect the datatable's appearance without messing with the sourcecode.
Please check this page regularly, to make sure you are using the most up to dat version of the function.2002/Aug/19
"next page" and "prev page" links added, as well as a link back to this page, so viewers of your own datatable creations can learn how to make their own.2002/Aug/11
Douglas has been busy again, and the datatable is now listed in reverse (newest items on top), with the add entry box on top, and with tab indexing. I was mentioning some of these, but before I had a chance to do them, he had them done! Enjoy.2002/Aug/01
Douglas Hurst, of Hurst Consulting & Design mailed me an accessibility update to the code. Mostly, it involved inclusion of
label elements, and a grouping of the form elements using
legend elements. Thanks, Douglas. The only changes I have made is to remove the word "guestbook" (this script is used for other purposes as well - an example), and the addition of a surrounding
div to aid in styling using CSS.
I added another Parameter 2 option - "type", which says whether a field is "text", "url", or "email", which affects how data is seen in non-edit mode. If it's "text", it prints out as normal. If it's "url", an HREF element is built up to point to that URL. If it's "email", another HREF is built, this time with "mailto:" prepended to the address. This added functionality does not check for errors (people not putting full HTTP addresses, for example) - if this is a problem, please mail me and I'll get down on my lazy butt and do it.
Please send any comments about these pages to email@example.com