Question

So i’m attempting to author my first plugin that accepts methods and options after init.
I was reading the Authoring Plugin tutorial on the JQuery website and I have come up with this

Fiddle

(function($) {
    /* Default Options */
    var defaults = {
        column_sort_map: []
    };

    /* Global Scope */
    var sort_col = false;
    var sortMethods = {
        date: function(a, b) {
            var date1 = new Date($(a).find(":nth-child(" + sort_col + ")").html());
            var date2 = new Date($(b).find(":nth-child(" + sort_col + ")").html());
            if (date1 == date2) {
                return 0;
            }
            if (date1 < date2) {
                return -1;
            }
            return 1;
        },
        string_case: function(a, b) {
            var aa = $(a).find(":nth-child(" + sort_col + ")").html();
            var bb = $(b).find(":nth-child(" + sort_col + ")").html();
            if (aa == bb) {
                return 0;
            }
            if (aa > bb) {
                return 1;
            }
            return -1;
        },
        string_nocase: function(a, b) {
            var aa = $(a).find(":nth-child(" + sort_col + ")").html().toLowerCase();
            var bb = $(b).find(":nth-child(" + sort_col + ")").html().toLowerCase();
            if (aa == bb) {
                return 0;
            }
            if (aa > bb) {
                return 1;
            }
            return -1;
        },
        numeric: function(a, b) {
            var aa = $(a).find(":nth-child(" + sort_col + ")").html().replace(/\D/g, '');
            var bb = $(b).find(":nth-child(" + sort_col + ")").html().replace(/\D/g, '');
            if (isNaN(aa)) {
                aa = 0;
            }
            if (isNaN(bb)) {
                bb = 0;
            }
            return aa - bb;
        }
    };

    var methods = {
        init: function(options) {
            // extend options
            if (options) {
                $.extend(defaults, options);
            }
            alert(options.column_sort_map);
        },
        test: function() {
         alert("I am a Test");   
        }
    };
    $.fn.dataTable = function(method) {
        return this.each(function() {
            if (methods[method]) {
                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            } else if (typeof method === 'object' || !method) {
                return methods.init.apply(this, arguments);
            } else {
                $.error('Method ' + method + ' does not exist on jQuery.dataTable');
            }
        });
    };

})(jQuery);

and I call it with

$("#tbl").dataTable({
    column_sort_map: [
        "numeric",
        "string_nocase",
        "string_nocase",
        "date",
        "string_nocase",
        "string_nocase",
        "numeric"
        ]
});

$("#tbl").dataTable("test");

The HTML code is very large and I don’t feel like writing out a new table. However for my problem it is not required.

I must stress again, this is one of my first times authoring a plugin like this. I may have completely misinterpreted the tutorial and have things majorly wrong.

My problem is that when I attempt to access options.column_sort_map I get ‘undefined’ error. However the function call to test works as expected.

Answer 1

The error is in the way you are trying to extend your defaults.

 $.extend(defaults, options);

This is actually setting defaults to hold the newly passed option, NOT options.

This fix should be as simple as:

var options =  $.extend(defaults, options);
alert(options.column_sort_map);

$.extend will return the newly created object, in addition to changing the first parameter. If you don’t want to affect defaults, then do this:

var options = $.extend({}, defaults, options);