declarative options via HTML markup (data attributes)
declarative options via HTML markup (data attributes)
patric
Posts: 6Questions: 0Answers: 0
Hello,
While most of my DataTables instances use the same options, some have special needs (e.g. horizontal scrolling). For these I use with HTML5 data attributes to customize the initialization options:
[code]
...
[/code]
In order to support these data attributes, my initialization currently looks like this:
[code]
var defaults = {
aLengthMenu: [[-1, 10, 25, 50, 100], ["all", 10, 25, 50, 100]],
iDisplayLength: -1,
};
$(".container table").each(function(i, node) {
var table = $(node),
options = {},
custom = table.data();
$.each(custom, function(key, value) {
options[key] = value;
})
options = $.extend({}, defaults, options);
table.dataTable(options);
});
[/code]
However, it seems like I might be reinventing the wheel here. Also, I'm not sure adding presentational attributes like that is really a good idea (particularly WRT to the "100%" value in this example).
Am I missing anything?
While most of my DataTables instances use the same options, some have special needs (e.g. horizontal scrolling). For these I use with HTML5 data attributes to customize the initialization options:
[code]
...
[/code]
In order to support these data attributes, my initialization currently looks like this:
[code]
var defaults = {
aLengthMenu: [[-1, 10, 25, 50, 100], ["all", 10, 25, 50, 100]],
iDisplayLength: -1,
};
$(".container table").each(function(i, node) {
var table = $(node),
options = {},
custom = table.data();
$.each(custom, function(key, value) {
options[key] = value;
})
options = $.extend({}, defaults, options);
table.dataTable(options);
});
[/code]
However, it seems like I might be reinventing the wheel here. Also, I'm not sure adding presentational attributes like that is really a good idea (particularly WRT to the "100%" value in this example).
Am I missing anything?
This discussion has been closed.
Replies
Yup this is a great idea. It has been floated a couple of times in the forum, but there has never been a complete solution presented. Its something I've fancied doing myself for quite a while, but never found time yet sadly, so that's for shoring your current solution :-).
The one thing I think that is missing at the moment is the column options - for that you might need to run through the TH elements in the header, parsing out the options. I wonder if it might be an idea to use the HTML 'data' attribute rather than adding random attributes to the markup.
Regards,
Allan
[code][/code]
ends up as
[code]options["sscrollx"] = "100%"[/code]
More generally though, I've become (more) skeptical as to whether this is a good idea, as it leads to tight coupling and presentational attributes. In the example above I think
[code][/code]
would be more appropriate (semantic). However, that example might not be representative; there might be cases where data attributes are the best solution?