• sorted
• searched
• paginated
• scroll infinitely
• themed
• …

And most important: it’s for free! I’ve always wanted to create an infinite scrolling table and now it’s just too easy:

$(document).ready( function() {
    oTable = $('#ip_data').dataTable( {
        "bProcessing":     true,
        "bServerSide":     true,
        "bPaginate":       true,  
        "bScrollInfinite": true,
        "bScrollCollapse": true,
        "sScrollY":        "200px",
        "sAjaxSource":     "get_ip_data.pl",
    } );
} );

And that’s it! Well, ok, you need to include the Javascript file and CSS files of the Datatables Project of course and you need to create the table in HTML.

For instance:

And then you will need a Perl script providing you the data for the table.
The below example allows to

• search the tables
• scroll infinitely
• sort on the columns

It also supplies the Datatables table with a total amount or rows in the database table.

This following script will be saved as ”get_ip_data.pl”

#!/usr/bin/perl
use strict; use warnings;
use DBI;
use JSON;
use CGI;

my @columns = qw/ip country_name city latitude longitude/;

my $q = CGI->new;
my $db = DBI->connect("dbi:mysql:host=localhost;db=testdb", 'testuser', 'xxxsecret');

my $params = $q->Vars;

# Get the total count of rows in the table
my $sql_count = "select count(id) from geo_data";
my $count = $db->selectrow_arrayref($sql_count)->[0];

# Start building up the database query
my @values;
my $sql = "select ip,country_name,city,latitude,longitude from geo_data";

# if a search parameter was supplied in the AJAX call, build the WHERE part in the SQL statement
if( $params->{sSearch} ){
    $sql .= ' WHERE ';
    $sql .= 'ip LIKE ? OR country_name LIKE ? or city LIKE ? or latitude LIKE ? or longitude LIKE ?';
    push @values, ('%'.$params->{sSearch}.'%','%'.$params->{sSearch}.'%','%'.$params->{sSearch}.'%','%'.$params->{sSearch}.'%','%'.$params->{sSearch}.'%');
}

# if a sorting parameter was supplied in the AJAX call, build up the ORDER BY part in the SQL statement
if( $params->{iSortingCols} ){
    $sql .= ' ORDER BY';
    foreach my $c (0 .. ( $params->{iSortingCols} -1 )){
        $sql .= ' ' . $columns[ $params->{"iSortCol_$c"} ] . ' ' . $params->{"sSortDir_$c"};
        $sql .= ','
    }
    $sql =~ s/,$//;
}

# Limit the output and also allow to paginate or scroll infinitely
$sql .= " LIMIT ? OFFSET ?";
push @values, (($params->{iDisplayLength} > 0 ? $params->{iDisplayLength} : 25), ( $params->{iDisplayStart} // 0));

# Fetch the data from the database
my $data = $db->selectall_arrayref($sql, { Slice => [] }, @values);

# Return the JSON object
print $q->header('application/json');
my $json = encode_json({ aaData => $data, iTotalRecords => $count, iTotalDisplayRecords => $count, sEcho => int($params->{sEcho}) });
print $json;

An example can be found overhere: http://www.moretrix.com/~insaniac/map/map.pl

I’m going to use to beef up my image browser which I quickly wrote to simply the contents of directory full with images. (can be found overhere http://yamamoto.moretrix.com/~insaniac/grtp/

Here’s the link to the article.

Thanks to the great LWP Perl module, this is again a rather easy and simple job.

Let’s start by explaining the script step-by-step:

1. Call your modules

   #!/usr/bin/perl
   use strict; use warnings;
   
   use LWP;
   use HTTP::Cookies;
   use HTTP::Request;
   use File::Path qw{mkpath};
   

   The modules HTTP::Cookies and HTTP::Request are required to create the cookie jar file and to make a HTTP request (duh!). These two modules will create the objects that are required for the LWP user-agent object we are about to create.

2. Check your temporary path:

   my $HOME = $ENV{HOME} . '/tmp';
   mkpath $HOME   unless -d $HOME;
   

   We will need this location to save our cookie jar file and the file we want to download

3. Create a cookie jar and a LWP user-agent:

   # create a cookie jar on disk
   my $cookies = HTTP::Cookies->new(
           file     => $HOME.'/cookies.txt',
           autosave => 1,
           );
   
   # create an user-agent and assign the cookie jar to it
   my $http = LWP::UserAgent->new();
   $http->cookie_jar($cookies);
   

   No rocket science here, just create the objects!

4. Send the authentication request:

   # try to log in
   my $login = $http->post(
           'https://www.example.com/auth/login.pl', [
               username => 'user',
               password => 'secret', ]
           );
   

   Once authenticated, the web site will create a cookie containing a session ID. This cookie will allow us to download the file we need from the secured part of the web site.

From this point on, it is required to check whether the log in succeeded and then continue with downloading the file. If the log in failed, an error message should be displayed with the reason on the failure.

# check if log in succeeded
if($login->is_success){
    print "- logged in successfullyn";
    print "- requesting file, might take a whilen";

    # make request to download the file
    my $url       = 'https://www.example.com/auth/files/backup.zip';
    my $file_req  = HTTP::Request->new('GET', $url);
    my $get_file  = $http->request( $file_req );

    # check request status
    if($get_file->is_success){
        print "--> downloaded $url, saving it to filen";

        # save the file content to disk
        open my $fh, '>', $HOME.'/backup.zip' 
                                         or die "ERROR: $!n";
        print $fh $get_file->decoded_content;
        close $fh;

        print "nsaved file:n";
        print "-------------n";
        print "filename:  ".$get_file->filename."n";
        print "size:      ".(-s $HOME.'/backup.zip')."n";
    }
    else {
        die "ERROR: download of $url failed: " . $get_file->status_line . "n";
    }
}
else {
    die "ERROR: login failed: " . $login->status_line . "n";
}

So using CSS and Javascript, this was actually a pretty easy job to do. The only hard thing to do, was making it browser indepedent. But in the end, even this wasn’t so hard at all since most of these steps have been thoroughly described on the Interweb.

What we will need is

• a CSS file
• a JavaScript file
• a HTML file

The CSS portion is actually very easy:
– Save this into a file called style.css

#blanket {
    display: block;
    position:absolute;
    width:100%;
    height: 100%;
    top:0px;
    left:0px;
    z-index: 9998;
    background-color:#111;
    opacity: 0.65;
    filter:alpha(opacity=65);
}
#popUpDiv {
    display: block;
    position:absolute;
    width:450px;
    height:500px;
    z-index: 9999;
    overflow: auto;
    padding-left: 4px;
    padding-right: 4px;
    background-color:#eeeeee;
}

As you can see: no rocket science. We create two layers: blanket and popUpDiv. The blanket layer will create a gray transparent layer over the entire page. The popUpDiv layer will create … well, I think it’s clear what this layer will do

The JavaScript portion contains a bit more code. It will contain four functions:

• toggle(): toggle the visibility of a layer
• create_blanket(): calculate the size of the blanket and display
• create_popup(): calculate the position of the popup layer and display
• popup(): wrapper function which calls toggle(), create_blanket(), create_popup()

Let’s start with the toggle() function, because that’s the shortest and easiest one.

function toggle(div_id) {
        var el = document.getElementById(div_id);

        if (el.style.display == 'none') {
                el.style.display = 'block';
        }
        else {
                el.style.display = 'none';
        }
}

Again, no rocket science. This procedure has been described and explained a million times on the Interweb, I will not redo it overhere.

Secondly, the create_blanket() function requires a bit more attention, since it’s more than 4 lines of code.
In this function, we will try to get the window height. We’ll do this in two different ways: one for Mozilla based browsers, one for Internet Exploder browsers.

if (typeof window.innerHeight != 'undefined') {
    height = window.innerHeight;
}
else {
    height = document.documentElement.clientHeight;
}

But then again … we could have just called document.documentElement.clientHeight since this is also supported by Mozilla based browsers.
The variable height will contain the browser height.
But, since we don’t all have huge screens which eliminates the usage of scrollbars, we will have to check if this height variable is smaller or bigger than the scroll area of the browser.

if ((height > document.body.parentNode.scrollHeight)
        && (height > document.body.parentNode.clientHeight)) {

        blanket_height = height;
}
else {
        if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
                blanket_height = document.body.parentNode.clientHeight;
        }
        else {
                blanket_height = document.body.parentNode.scrollHeight;
        }
}

And finally we’ll create this blanket:

var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';

So on with the create_popup() function. This function will first retrieve information about the different dimensions required to calculate the position of the popup. The following information is required:

• scroll_width: amount of pixels scrolled from left
• scroll_height: amount of pixels scrolled from top
• client_width: width of the browser (without scrollbars, menubars, padding, …)
• client_height: height of the browser (without scrollbars, menubars, padding, …)
• popup_width: popup width defined in CSS stylesheet file
• popup_height: popup height defined in CSS stylesheet file

First the scroll width and scroll height:

if( typeof( window.pageYOffset ) == 'number' ) {
        //Netscape compliant
        scroll_height = window.pageYOffset;
        scroll_width = window.pageXOffset;
} 
else if( document.body
        && ( document.body.scrollLeft || document.body.scrollTop ) ) {
        //DOM compliant
        scroll_height = document.body.scrollTop;
        scroll_width = document.body.scrollLeft;
} 
else if( document.documentElement
        && ( document.documentElement.scrollLeft
            || document.documentElement.scrollTop ) ) {
        //IE6 standards compliant mode
        scroll_height = document.documentElement.scrollTop;
        scroll_width = document.documentElement.scrollLeft;
}

Secondly the client height and width:

var client_height = document.body.parentNode.clientHeight;
var client_width  = document.body.parentNode.clientWidth;

And last the popup height and width as stated in the CSS stylesheet file:

var popup_height = parseInt(window.getComputedStyle(popUpDiv, "").getPropertyValue('height'));
var popup_width  = parseInt(window.getComputedStyle(popUpDiv, "").getPropertyValue('width'));

We need to wrap these values from the CSS stylesheet file around the JavaScript function parseInt() since the .getPropertyValue() function will return the values with ‘px’ at the end. (e.g.: 400px)

Based on the above information, the position from top and left will be calculated:

var left    = client_width  / 2 + scroll_width  - (popup_width / 2);
var top     = client_height / 2 + scroll_height - (popup_height / 2);

The only thing left to do is, is sending these position values to the browser by simply changing the CSS values for this DIV object:

popUpDiv.style.left  = left + 'px';
popUpDiv.style.top   = top + 'px';

The final function, popup(), will be the wrapper function called from within the HTML code.

function popup(windowname) {
    create_blanket(windowname);
    create_popup(windowname);
    toggle('blanket');
    toggle(windowname);
}   

So now we only need some HTML code to test this!
Click here to have a demo page (so where you could do right click + ‘View Source’)