JQuery Authoring Plugins. Passing Methods vs Options
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:开发者_StackOverflow [
"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.
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);
Your call to the plugin is incorrect. You have it set up to supply a "method" when invoking the plugin but you're not doing that for the first call. You would have to use
$("#tbl").dataTable("init", . . .
and then pass your options.
精彩评论