Javascript basics for DataTables

Javascript basics for DataTables

It's no surprise that many people come to DataTables looking for a solution, but doing some things in DataTables more complex than the basic intialization can require a bit of programming.  Not everyone who has a problem to solve is necessarily a seasoned programmer, and that's ok, but sooner or later a little bit of Javascript and JQuery is needed to customize your DataTable.  Javascript and JQuery are pretty extensive and full of features, so knowing exactly where to start can be a challenge for someone not already familiar with the libraries; and because DataTables is built on JQuery (it's a plug-in), there are some syntax even in basic usage that can't be explained properly without knowing a little about JQuery.

This blog will be a little walkthrough and tutorial about Javascript basics specifically geared to DataTables users. (see next blog entry for JQuery basics)

JQuery is a library of functionality built for Javascript.  In other words, Javascript exists independently of JQuery and is more primary or basic, but JQuery is dependent on Javascript.  Because of this, I'll go over a few basics of Javascript.  If you already know Javascript you can skip this section and jump to the blog post that describes JQuery for DataTables.


Javascript

Javascript (more formally ECMAScript) is, as you know, a scripting language that is heavily used to support web pages.  It provides all the basic language elements that you'd find in any programming language:  variables, arrays, objects, control flow, arithmetic operations, boolean operations, functions, etc.  It does have some nice syntactic options that make it very flexible, significantly the ability to make "anonymous" inline function, array, and object literals.  And because arrays and functions are types of objects, they can be passed as data to functions or held as elements in objects in a very regular fashion.

Literally

Object, function, and array literals might sound very technical but you've probably seen them many times, just not put such a fiercely nerdy name to them.  "Literal" just means something expressed directly:  strings and numbers and boolean values in Javascript are literals that indicate a value - 5 and "hello!" and true are types of literals.  You can also directly express an array value with brackets like [1, "Michael", false], and you can express an object directly with curly braces like { "name": "Jonathan", "age": 25 }, and functions are expressed literally using parentheses and a function block like function(a,b) { return a+b; }

Object, function, and array literals are used often in Javascript and even more often in JQuery and DataTables, so it makes sense to familiarize yourself with them.  It's also worth pointing out in brief how these constructs are usually used. 

Life as an array

An array is a list of values and in Javascript the values can be of any type (numbers, boolean, strings, objects, functions, other arrays).  The order is important (kept consistent) and elements are indexed by position, integers starting at 0 and higher count up until the last element.  If you need an ordered list of elements, the array is what you want.  In Javascript you can add and take elements out of the array; the system will manage the index numbers for you.  In addition to the array literal, you can define arrays by calling it's constructor function:  new Array(1, "Michael", false)  creates an array identical to the literal array above.  You can add and take away elements from the tail (the high index end) with push() and pop(), or at the head (index 0) with unshift() and shift().

var a = [1, "Michael", false]; // literal syntax
var b = new Array(1, "Michael", false); // constructor syntax

a.push(9);  // add 9 to the end of array a
var c = b.pop();  // take element off the end of b, assign it to c
b.unshift("horse"); // push "horse" onto the head of the array
c = a.shift();  // pop value off array a and assign it to c

I object!

Objects in Javascript are great containers for data as well.  Unlike arrays, though, objects don't guarantee the order of the elements in it.  And also unlike arrays, the key/index to a value in an object is a string.  Objects in Javascript act as "associative arrays" or "dictionaries" would in other languages.  (Associative array is a fancy way of just saying an array that uses strings instead of numbers as indexes.)  Because of this key/value pairing, the object literal syntax above specifies key/value pairs separated by colon ':', and you can include more than one pair separated by comma.  Like the array, objects can be declared using a constructor function  new Object().  You can directly add elements (key/value pairs, often called "members" or "instance variables" in Object Oriented lingo) directly to an object using a dot syntax i.e. obj.a = "Alexander" or by using a bracket syntax obj["a"] = "Alexander".  The dot syntax looks like object oriented syntax from C++, Java, C# and other languages while the bracket notation looks like associative array syntax from PHP or Python.  The one difference between the 2 ways to specify members is that the bracket notation can accept any operation that expresses or can be converted to a string.

var o = { "name": "Jonathan", "age": 25 };  // literal syntax
var p = new Object(); // constructor syntax
p.name = "Jonathan";
p["age"] = 25;

// you can't do the following with dot notation:
o["a"+"ge"] = 26;   // Javascript will evaluate "a" + "ge" to perform concatenation and use the string "age"

It's interesting to note that although objects act as advanced associative arrays (in other languages), that the object is more primary and basic than the array in Javascript.  An array is a subclass of object, but has added functionality that acts as a more primitive integer-indexed array of other languages.  You can, however, add members to an array using the dot notation or bracket notation, because it is afterall an object.  You can do the same with function objects, which may confuse people coming from languages where functions are a completely different construct.

Does it function?

Functions in Javascript are objects but you should treat them as if they are simply subroutines.  The advantage of functions being objects is that you can pass them as you pass any other data into another function, object, array, etc.  Functions, of course, ARE subroutines (or have a subroutine component) and they can return a value.  This is useful for crunching data and computing a value to return.  The return value can be any value type, including an object, array of values, or a function (even itself, if you were wondering).  The literal syntax for a function is surely familiar to you because it's the preferred way to declare a function.  Like other objects, you can declare a function using a constructor syntax, but this is not often used.

function sum(a,b) { return a+b; } // function declaration, given name
sumAB = function(a,b) { return a+b; } // function literal, assigned to a name
sums = new Function("a", "b", "return a+b"); // constructor syntax

Anonymous

A subtle advantage in Javascript is that you can use the object, function, and array literals to create these objects on the fly without declaring them in a more traditional constructor syntax.  Combining this with the ability to pass any of these objects (remember they are all objects) as a value in a function or other array or other object means you can very flexibly pass values to initalize or act as data in one of those functions or objects.  This leads to an idiom that is used in just about every DataTables example:

$('#example').dataTable( {
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": true,
        "bSort": false,
        "bInfo": false,
        "bAutoWidth": false } );

       
Ignoring the JQuery portion of this code [ $('#example') ] I want to point out that the argument passed to the dataTable function is an object we created with a literal.  This would be the same as if we specified:

var oInit = new Object;
oInit.bPaginate = false;
oInit.bLengthChange = false;
oInit.bFilter = true;
oInit.bSort = false;
oInit.bInfo = false;
oInit.bAutoWidth = false;

$('#example').dataTable( oInit );

The literal object example has become the preferred syntax and performs the same operations but with less code and places the entire object definition within the parentheses of the function call, right where it will have its effect.

Object literals are advantageous because (acting like associative arrays) you can specify key/value pairs without worrying about a specific order.  And as long as the function call accepting the object handles it, you can omit many values.  Compare this to a more traditional function that requires a set of parameters, in specific order:

// this isn't really how dataTables is coded, but a hypothetical
function dataTable(bPaginate, bLenghtChange, bFilter, bSort, bInfo, bAutoWidth) { ... } // the ... just means I didn't bother putting code in there but something would be there

// if you want to use this function, you need to specify your values in the correct order, and if you want to skip one, you have to pass a null or empty value
$('#example').dataTable(false, false, null, true, true, false);

In this hypothetical example, the dataTable function call is a lot harder to decipher for the reader because the mapping of values to their keys is not shown.  And having to pass in null or empty values as place holders for unused values adds to the mess.