Reusable jQuery Parameter Maps

Many JavaScript functions (including jQuery plugin functions) accept a map of parameters as an argument. A map takes the form of key-value pairs, with the key being the parameter name and the value being almost anything, from a simple string to a complex function:

{parameter1: 'value', parameter2: 'value2', parameter3: 'value3'}

Using Allan Jardine’s DataTables jQuery Plugin we’re going to see how any function that accepts a map of parameters can be given a basic DRY (Don’t Repeat Yourself) treatment. In other words, we will take some base parameters for a DataTables initialization, and extend them so that particular tables can get specific values.

Standard DataTable Initialization

Let’s imagine in our application we will always be using an Ajax source, no pagination, and allow filtering with DataTables’ built-in search box.

$(document).ready(function() {
    $('#myTable').dataTable( {
        "sAjaxSource": "myscript.php"
        "bPaginate": false,
        "bFilter": true
    } );
} );

As you can see, the dataTable function has a map { … } inside of it. By manipulating this map outside of the dataTable() function, we can later pass the whole revised map back in as a variable like so:

$('#myTable').dataTable(myMap);

Base and Extended Parameters

Looking at my example initialization, we can see that one of the parameters is not like the others. And it’s the sAjaxSource: each table is likely to have its own. We have identified by exclusion what the base parameters should be: bPaginate and bFilter. All our tables will have these set the same way.

var mapExtend,
mapComplete,
mapBase = {
  "bPaginate" : false;
  "bFilter" : true
};

Here I declare the three variables I will use. Just for tidiness, mapExtend and mapComplete have no values yet, and since mapBase is at the end I go right into setting the value as our map of base parameters. In theory, you could re-use a variable, bringing your set down to 2, or string everything all together into one declaration… but code should remain readable, and extra variables are cheap.

Next, you will have some sort of condition to meet in order to set your specific sAjaxSource. That part is up to you. Here’s a generic example:

if (foo == bar) {
  mapExtend = { "sAjaxSource" : "source1.jsp" }
} else {
  mapExtend = { "sAjaxSource" : "source2.jsp" }
}

Finally, we simply use jQuery’s .extend() utility in order to create the new completed map:

mapComplete = $.extend(true, {}, mapBase, mapExtend);

And of course you will need to decide what to do with that on your own. You might find it useful to wrap it all up into a function and pass it the ID of a different table that it’s actually going to be applied to. It’s really up to you. In its most basic form, our example could be as simple as having one DataTable ID but with different sources. Possibilities are limited by nothing more than your understanding of piecing modular bits together. For today’s example, the final call is always to the same instance of a table ID, but with different sources depending on condition. The call is the same no matter, since mapExtend takes care of the condition:

$('#myTable').dataTable(mapComplete);