Introduction
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development
Today we are going to look at a proof of concept that uses jQuery and the Datatables plugin to product a paginated list of entries in Movable Type. By calling it a proof of concept I can get away with a few rough edges and make a series of posts on getting it smooth.
What we are going to do is create a JSON formatted text file with information about the entries for the archive and a archive template that will read the file to create the table. If you want to read ahead you can follow the link to see the final product, a sortable, paginated list of blog entries.
What you need
- A working Movable Type Installation.
- The Datatables plugin. You can download it from http://datatables.net.
- A jQuery Theme. You can download it from http://jqueryui.com.
Step 1: Copy the files to the server
The datatable plugin and the jQuery theme need to be uploaded to the server. In my example the datatable plugin has been uploaded to /jq/dt/ and the theme to /jq/ui/.
Step 2: Creating a JSON formatted text file.
JSON stands for JavaScript Object Notation and is a lightweight data-interchange format, easy for humans to read and write, and easy for machines to parse and generate. You can find more information at http://www.json.org/.
What we need is a template that creates an array called aaData that has and array for each entry with the following information; Date, Title and an excerpt.
Log into the administration page for your blog and from the menu select Design > Templates
Under Blog Templates select create index template
Enter JSON Entries as the name of the template at the top of the page.
Enter the following template code:
{
"aaData" : [
<mt:entries lastn="1000">[
"<mt:entrydate format="%Y-%m-%dT%H:%M:%S">",
"<a href=\"<mt:entrypermalink>\"><mt:entrytitle></a>",
"<mt:entryexcerpt words="15">"
]<mt:unless name="__last__">,</mt:unless></mt:entries>
]
}
Under template options use json_entries.txt as the output file and choose your publishing method. I have chosen via publishing queue so it will be built later via a cron job rather than take up publishing time updating the file.
So what does this mean?
Well this template will take the last 1000 entries and for each entry output the date and time (as YYYY-MM-DDTHH:MM:SS, although you can change this to any JavaScript supported data format), the title of the post as a link to the post and the first 15 words of the posts as an excerpt. The template will generate a file called json_entries.txt that we will use later.
Step 3: The Archive Page
For this proof of concept we are going to create a blank page with the table in it, in a later post I will go through adding it in to an existing template. So we go through the same process as stage 2 and create a new index template. This time we are going to call it jQuery Archive.
Enter the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Archive Test</title>
<style>
@import "jq/dt/media/css/demo_page.css";
@import "jq/dt/media/css/demo_table_jui.css";
@import "jq/ui/css/smoothness/jquery-ui-1.7.2.custom.css";
</style>
<script type="text/javascript" language="javascript" src="jq/dt/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="jq/dt/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
oTable= $('#example').dataTable( {
"bAutoWidth" : false,
"bJQueryUI" : true,
"bProcessing": true,
"bPaginate" : true,
"sPaginationType" : 'full_numbers',
"sAjaxSource": 'json_entries.txt',
"aoColumns" : [
null,
{"sType": "html"},
null
]
} );
} );
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="display"
id="example">
<thead>
<tr>
<th >Date Posted</th>
<th >Title</th>
<th>Excerpt</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
Under template options use jq_archive_demo.html as the output file and choose manual for the publishing method as this only needs to be built once, all the data will be coming from the JSON file we created.
So what does this mean?
Let us start from the top.
- First we import the stylesheets for the datatable plugin and for the jQuery-ui (in our case smoothness).
- Then we call the jQuery and Datatable script files and initialize the datatable with the id of example; we disable the automatic calculation of column widths as this can slow the process down, we enable the use of themes, enable a processing dialog when sorting, turn on pagination, point it to the file full of data and tell the plugin that the 2nd column contains html so ignore markup when sorting.
- In the body of the page we create an empty three column table, the plugin needs us to use the thead and tbody tags to make it clear what are headers.
Step 4: Build the Templates Once
To kick start it build the JSON Entries and jQuery Archive templates manually once. The archive should now be working
Troubleshooting
Blank table with no JavaScript errors?
- Check that json_entries.txt exists on the server. If not try manually building the template again.
- Check that json_entries.txt has entries in it.
- Check that the JSON is valid by using JSON Lint
JavaScript errors
- Check the paths to the script files are correct
- Check that the table id is correct
Unstyled Table
- Check the paths to the css files are correct
Hi Rob! Thanks for this tutorial! It will come in handy for some of my future projects. Thanks for taking the time to explain how you did it. Very cool!