HTML5 Data Tag to init

FlashJunior

I have many different tables, with diffrent settings.
It would be cool if you could declerate this settings directly from html :-)


I build a little workarround for me. but its very ugly :-)

Example @ http://www.flashjunior.ch/test/tables/datatables/


A table looks like this
[code]



Col 1
Datum
Col 3





[/code]



my ugly js code:

[code]

$(document).ready(function() {

$('.datatable_display').each(function(){
var table = $(this);
var table_d = table.data("datatable");

//init table sorting
var aoColumns = [];
var aaSorting = [];

$('thead th', table).each(function(){
var obj = $(this);
var obj_d = obj.data("datatable");


var aoColumnsObj = {}

if(obj_d && obj_d.sort){
aaSorting.push([obj.index(),obj_d.sort]);
}

if(obj_d && obj_d.sorttype){
aoColumnsObj.sType = obj_d.sorttype;
}


if(obj_d && obj_d.classes){
aoColumnsObj.sClass = obj_d.classes;
}

if($.isEmptyObject(aoColumnsObj)){
aoColumns.push(null);
}else{
aoColumns.push(aoColumnsObj);
}

});


//init table settings
var table_s = {}
table_s.bJQueryUI = true;
table_s.bProcessing = true;
table_s.bDeferRender = true;
table_s.sPaginationType = "full_numbers";

table_s.aaSorting = aaSorting;
table_s.aoColumns = aoColumns;

table_s.fnDrawCallback = function() {table.trigger("fnDrawCallback");};

table_s.aLengthMenu = [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Alle"]];

if(table_d && table_d.source){
table_s.sAjaxSource = table_d.source;
}

if(table_d && table_d.statesave == "true"){
table_s.bStateSave = table_d.statesave;
}

if(table_d && table_d.displaylength){
table_s.iDisplayLength = table_d.displaylength;
}

oTable = table.dataTable(table_s);


});
});



[/code]


the cool thing is that i just need to put "datatable_display" class on a table and it's ready.

what do you think?!