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 jQuery Datatables

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.

I started using jQuery.Datatables recently, and was dissapointed with the getting started documentation. Among other things, this says "DataTables has most features enabled by default, so all you need to do to use it with one of your own tables is to call the construction function (as shown below)." Below is shown:

$(document).ready(function() {
   $('#mytable').dataTable();
} );
So lets follow the recipe. The simplest I'm going to try is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" language="javascript" src="/script/jquery.js"></script>
<script type="text/javascript" language="javascript" src="/script/jquery.dataTables.js"></script>

<script>
$(function() {
      $('#mytable').dataTable( {
   });
});
</script>

<body>
<div id="container" style="width:800px; margin:0 auto;">
<table id="mytable" style="margin:20px 0px 20px 0px;">
<thead>
<tr><th>One</th><th>Two</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td></tr>
<tr><td>11</td><td>22</td></tr>
<tr><td>12</td><td>23</td></tr>
<tr><td>13</td><td>24</td></tr>
<tr><td>14</td><td>22</td></tr>
<tr><td>11</td><td>22</td></tr>
<tr><td>12</td><td>22</td></tr>
<tr><td>13</td><td>22</td></tr>
<tr><td>14</td><td>22</td></tr>
<tr><td>11</td><td>22</td></tr>
<tr><td>11</td><td>29</td></tr>
<tr><td>1</td><td>22</td></tr>
</tbody>
</table>
</div>
</body>
</html>
The container DIV is there because I'd want to determine where the table appeared, and because it is there in the example source. Nothing complicated there.

You can see the result in the first of a sequence of test pages - dt101. This is a start. I you change the show entries droplist to 25, then more rows are showm. If you click on the column headers, then sorting happens. The information below the table is correct. However, there's no provision for navigation between the pages of 10 rows, and the formatting does not match the expectations from the examples shown on the Datatables web page.

"Some styling required" might be the required notice here. If you check the DOM (HTML tab) in Firebug you'll see that the Javascript has added an extra wrapper DIV and a couple of DIVs before and after the table.

Before the table, the mytable_length DIV is the one that contains the "Show XX Entries" component, and the mytable_filter DIV contains the "Search" component. After the table, the mytable_info DIV has the Showing entries info stuff. The mytable_paginate DIV is conspicuous by its absence.

OK, the first thing we can do is to sort out the messy formatting of the surrounding components. In our currently empty style section we can enter the corresponding classes from the provided example CSS file:


div.dataTables_length {
	float: left;
}
div.dataTables_filter {
	float: right;
}
You can see the result in dt102. The top elements now bear a sensible relationship to the examples.

The bottom elements are problematic, since we can only see one of them. By analogy we can add a class to deal with the info. This is the one from the example CSS file:


div.dataTables_info {
	padding: 9px 6px 6px 6px;
	float: left;
}
But looking at the DOM, we see that the second bottom DIV has two classes. The second is in another CSS file. In my attempt at working classes I have added a height for class dataTables_paginate, and minimized paging_two_button:

.dataTables_paginate {
	width: 44px; height:19px;
	float: right;
	text-align: right;
}
.paging_two_button {
	cursor: pointer;
}
The result, dt103, still doesn't show anything related to pagination. This is because what should be shown depends on background images.These are accurately described in one of the supplied CSS files, so we add:

.paginate_disabled_previous {
   width:19px; height:19px;
   float:left;
	background-image: url('back_disabled.jpg');
}

.paginate_enabled_previous {
   width:19px; height:19px;
   float:left;
	background-image: url('back_enabled.jpg');
}

.paginate_disabled_next {
   width:19px; height:19px;
   float:right;
	background-image: url('forward_disabled.jpg');
}

.paginate_enabled_next {
   width:19px; height:19px;
   float:right;
	background-image: url('forward_enabled.jpg');
}
At this point, ensure that the images from the distribution are in the correct place. In my example thet should be in the same folder. Then you should see the forward and back buttons as in dt104.

So then, the only missing item is the sort indications on the column headers. If I use the out-of-box background styles that implement these, they appear behind the column name, so instead I used:


.sorting_asc {
	padding-right:18px;
	cursor: pointer;
	background: url('sort_asc.png') no-repeat top right;
}

.sorting_desc {
	padding-right:18px;
	cursor: pointer;
	background: url('sort_desc.png') no-repeat top right;
}

.sorting {
	padding-right:18px;
	cursor: pointer;
	background: url('sort_both.png') no-repeat top right;
}

.sorting_asc_disabled {
	padding-right:18px;
	cursor: pointer;
	background: url('sort_asc_disabled.png') no-repeat top right;
}

.sorting_desc_disabled {
	padding-right:18px;
	cursor: pointer;
	background: url('sort_desc_disabled.png') no-repeat top right;
}
And there you have it. At that point the demo, dt105, displays most of the Datatables functionality setting aside loading from the server via AJAX - which is quite straightforward, and server-side processing, which I have not tried.

Also at that point, you should have a much better idea of how to work with Datatables - "Some styling required".