/**
*
*/
(function(jQ) {
/**
* Default options
*/
var Defaults = {
cols: 0,
rows: 0,
cssClass: null, //if not set will try to get it from the object
itself
//if titles on the first table raw is needed
//
thead: false,
ajax: false, //if loaded by ajax
//set to specific url from where the JSON object will be loaded.
Makes an effect only if "ajax"param is true.
//the default value is taken from "loadUrl" attribute of the
table
loadUrl: false,
//is the table sortable; if needed set to list of column names
to
sort by
sortable: false,
preLoad: null, //function to run right before loading process
onDataReceived: null, //callabck to run whenever the table data
is
received
onDataError: null, //a callback, if error occures while data
fetch
postLoad: null //a callback that called when the JSON data load
finished
}
/**
* if the table was initialized
*/
var Initialized = false;
var Selector = "";
var Titles = { // id: "title text"
col1: "Column 1",
col2: "Column 2",
col3: "Column 3"
};
var Data = new Object();
var Options = null;
/**
* Constructor
*/
jQ.fn.table = function(options, titles, data){
if(jQ(this).length == 0){
//try to find at least one element
$.log("Matching element "+jQ(this).selector+" was not
found!")
return null;
}
//validate that this element is unique i=on hte page
if(jQ(this).length > 1){
$.log("The element's selector must be unique on the
page!");
return null;
}
//check if the elemment is a table
alert(jQ(this).selector);
if(!jQ(this).is("table")){
$.log("The element must be valid table element!");
return null;
}
/**
* Save the selector for further
*/
Selector = jQ(this).selector;
//extend defaults
Options = jQ.extend({}, Defaults, options);
//init additional data
//init UI
jQ.fn.table.initUI();
return jQ(this);
};
/**
* Set new set of titles.
* If the table is empty the definition of titles will define the
table from the scratch
* if the number of columns is already defined, only those
matching by id will be replaced.
*/
jQ.fn.table.SetTitles = function(tlsObj){
return $.each(tlsObj, function(id, val){
jQ("thead tr td#"+id, this).text(val);
})
};
jQ.fn.table.Clear = function(dataOnly){
if(dataOnly){
jQ(Selector+" > :not('thead')").remove();
} else {
jQ(this).remove();
}
};
/**
* initialize UI. create a first look of the table
*/
jQ.fn.table.initUI = function(){
if(Initialized){
return;
}
Options.cols = Object.size(Titles);
c = 0;
//set scc if needed
if(Options.cssClass != "" || Options.cssClass != null){
jQ(this).addClass(Options.cssClass)
}
//deal with the thead
if(Options.thead == true){
//need to wrap first row with thead
}
//fill in the thead
var tHead = $("<thead></thead>");
var tr = $("<tr></tr>")
$.each(Titles, function(i, val){
$("<td></td>").attr({
id: i
}).text(val).appendTo(tr);
});
tHead.append(tr).prependTo(this); //Options.rows++;
}
// /**
// * Cleans and polulates the whole entier table with data
// */
// jQ.fn.TablePopulate = function(obj){
// //$.each
// };
//
// /**
// * Adds data to the end of the table
// */
// jQ.fn.TableAdd = function(obj){
//
// };
})(jQuery);
Here you go.
