sb.widget.magicTable.compare.alpha

@Description: Sort alphabetically
@File: widget/magicTable.js

sb.widget.magicTable.compare.currency

@Description: Sort by currency
@File: widget/magicTable.js

sb.widget.magicTable.compare.date

@Description: Sort by US date
@File: widget/magicTable.js

sb.widget.magicTable.compare.date

@Description: Sort by date
@File: widget/magicTable.js

sb.widget.magicTable.compare.natural

@Description: Sort naturally
@File: widget/magicTable.js

sb.widget.magicTable.compare.nocase

@Description: Sort alphabetically, case insensitively
@File: widget/magicTable.js

sb.widget.magicTable.compare.numeric

@Description: Sort numerically
@File: widget/magicTable.js

sb.widget.magicTable.compare.reverseAlpha

@Description: Sort reverse alphabetically
@File: widget/magicTable.js

sb.widget.magicTable.loadRows

@Description: Loads more rows from the server. It expects the loading page to be in json format and to be an array of arrays which represent the values in the rows. Null values should be represented by null.
@File: widget/magicTable.js
@Param: o String The url to load the data from
@Param: o object
o.url String The url to load the data from
o.onLoad Function The function that runs, once the rows are returned from the server but before they are added. If it returns false they are not added.
@Example:

myTable.loadRows('/some/data');
 
    myTable.loadRows({
        url : '/some/data',
        //if you return false, the rows are not added
        onLoad : function(response){
            alert('response');
            return true;
        }
    });

sb.widget.magicTable.prototype.compare

@Description: The sort methods avaiable to sb.widget.magicTable. You can add your own too! some compare and guessFormat sort functions adapted from http://www.tagarga.com/blok/post/2
@File: widget/magicTable.js

sb.widget.magicTable.prototype.getHeaderValue

@Description: Cleans the header data for a th
@File: widget/magicTable.js
@Param: th Element The th that was clicked.
@Example:

myTable.getHeaderValue = function(){
       
    };

sb.widget.magicTable.prototype.getHeaderValue

@Description: Cleans the header data for a th
@File: widget/magicTable.js
@Param: td Element The td element to get the value of
@Param: rowIndex The row index
@Param: cellIndex The cell index
@Example:

//returns the value of the td node passed to the function
    var data = myTable.getCellValue(td);
    
    //returns the value of cell 3 in row 0
    var data = myTable.getCellValue(0,3);

sb.widget.magicTable.prototype.onAfterSort

@Description: fires after .sortBy is run and after actual sort is done. The "this" is the magicTable instance itself.
@File: widget/magicTable.js
@Param: td Element The th that was clicked.
@Example:

myTable.onAfterSort = function(th){
       //renumber the first td in each row after sort
        var rows = this.body.$('tr');
        var x = 1;
        rows.forEach(function(v){
            v.firstChild.innerHTML = x;
            x++;
        });
    };

sb.widget.magicTable.prototype.onBeforeSort

@Description: fires after .sortBy is run but before actual sort begins. The "this" is the magicTable instance itself.
@File: widget/magicTable.js
@Param: th Element The th that was clicked.
@Example:

myTable.onBeforeSort = function(th){
       //do something
    };

sb.widget.magicTable.prototype.onCellClick

@Description: fires when a cell is clicked. The "this" is the magicTable instance itself.
@File: widget/magicTable.js
@Param: td Element The td that was clicked.
@Example:

myTable.onCellClick = function(td){
        td.style.backgroundColor = 'pink';
        if(td.innerHTML == 'delete'){
            $(td.parentNode).remove();
        }
    };

sb.widget.magicTable.prototype.onCellMouseOut

@Description: fires when a table cell is moused out. The "this" is the magicTable instance itself.
@File: widget/magicTable.js
@Param: td Element The td that was mousedout.
@Example:

myTable.onCellMouseOut = function(td){
        td.style.backgroundColor = '';
    };

sb.widget.magicTable.prototype.onCellMouseOver

@Description: fires when a table cell is moused over. The "this" is the magicTable instance itself.
@File: widget/magicTable.js
@Param: td Element The td that was mousedover.
@Example:

myTable.onCellMouseOver = function(td){
        td.style.backgroundColor = 'pink';
    };

sb.widget.magicTable.prototype.onColClick

@Description: fires when a cell in a column is clicked. Because there is no correspionding column node in HTML it returns an sb.nodeList of all the tds in the column. The "this" is the magicTable instance itself.
@File: widget/magicTable.js
@Param: column Object An object representing the column clicked and some additional data
column.title String The title of the column
column.values Array An array of the values in the column
column.th Element The TH of the column clicked
column.tds sb.nodeList containing the TDs of the column clicked
column.prevColumn A reference to the last Column clicked if there was one. This allows to reset any changes (e.g. style changes) from the last column.
@Example:

myTable.onColClick = function(column){
        //change all the columns to yellow
        column.tds.styles({
            backgroundColor : 'yellow'
        });
        
        if(column.prevColumn){
            column.prevColumn.tds.styles({
                backgroundColor : ''
            });
        }
        
        column.values = column.values.map(function(v){
            return parseInt(v, 10);
        });
        alert(column.values.sum());
    };

sb.widget.magicTable.prototype.onHeaderClick

@Description: fires when a header TH is clicked. The "this" is the magicTable instance itself.
@File: widget/magicTable.js
@Param: th Element The th that was clicked.
@Example:

myTable.onHeaderClick = function(th){
        th.style.backgroundColor = 'red';
    };

sb.widget.magicTable.prototype.onRowClick

@Description: fires when a row is clicked. The "this" is the magicTable instance itself.
@File: widget/magicTable.js
@Param: td Element The td that was clicked.
@Example:

myTable.onRowClick = function(tr){
        tr.style.backgroundColor = 'red';
    };

sb.widget.magicTable.prototype.removeRows

@Description: Removes rows from a magicTable instance, rows start at 0
@File: widget/magicTable.js
@Example:

//removes row 1
    mymagicTable.removeRows(1);
    //all rows in the array
    mymagicTable.removeRows([0,1,5,7]);
    //remove all rows in range
    mymagicTable.removeRows('1-3');

sb.widget.magicTable.sortBy()

@Description: Loads more rows from the server. It expects the loading page to be in json format and to be an array of arrays which represent the values in the rows. Null values should be represented by null.
@File: widget/magicTable.js
@Param: header string Either the text value of the header to sort by, or a DOM reference to the header itself. Always lowercase.
@Param: reverse boolean Sort DESC
@Example:

myTable.sortBy('age');
    //or reverse
    myTable.sortBy('age', true);
    //sort by column 0
    myTable.sortBy(0);
    //sort by a <th> node DOM reference
    myTable.sortBy(th);

sb.widget.table.prototype.addHeaders

@Description: Adds rows to table headers
@File: widget/magicTable.js
@Example:

myTable.addHeaders(['Blythe', '50','Wed, November 24, 2004','04/12/03','3.9.05', '$6,89']);

sb.widget.table.prototype.addRows

@Description: Adds rows to a table instance
@File: widget/magicTable.js
@Example:

myTable.addRows(['Blythe', '50','Wed, November 24, 2004','04/12/03','3.9.05', '$6,89']);
    //or
    myTable.addRows([
         ['Julie', 'f', 54, 3456],
        ['Wendy', 'f', 22, 4562],
        ['Gina', 'f', 78, 5773],
        ['Timmy', 'm', 12, 5467],
        ['Jason', 'm', 45, 3452],
        ['Tony', 'm', 5, 3456]
    ]);

sb.widget.table.prototype.classes

@Description: The CSS classnames to use. These are all optional and some have defaults, see below
@File: widget/magicTable.js
@Example:

myTable.classes.unsortable String The classname for columns you want to set as unsortable, the default is 'unsortable'
        myTable.classes.sortable String The classname added to all sortable columns <th>s by sb.magicTable, default is 'sortable'
        myTable.classes.sorted_by String The classname added to the <th> being sorted on, default is 'sorted_by'
        myTable.classes.force_sort String The className used for forcing sort type
        myTable.classes.asc String The className you want used for ascending sorts, if you don't just want the default arrow
        myTable.classes.desc String The className you want used for descending sorts, if you don't just want the default arrow
        myTable.classes.even String The className used even rows if you want even/odd CSS
        myTable.classes.odd String The className used odd rows if you want even/odd CSS

sb.widget.table.prototype.defaultSortedBy

@Description: The default column to sort by, either by cellIndex or title. See constructor arguments above.
@File: widget/magicTable.js
@Example:

var myTable = new sb.widget.magicTable({
        table : '#jimmy',
        sortable : 1,
        defaultSortedBy : 2,
    });
    var myTable = new sb.widget.magicTable({
        table : '#jimmy',
        sortable : 1,
        defaultSortedBy : 'age',
    });

sb.widget.table.prototype.setSortTypes

@Description: Allow you to predefine the column sort types, must match column header. Compare types defined in sb.widget.magicTable.prototype.compare
@File: widget/magicTable.js
@Param: headers Array An array that represents the predefined sort type for each column as in
@Example:

myTable.setSortTypes(['alpha', 'numeric', 'natural', 'natural', 'usdate', 'usdate', 'alpha']);

sb.widget.magicTable

@Description: Makes or adds interactivity to an HTML table. All events are attached to the table and delegated from their to keep overhead very low
@File: widget/magicTable.js
@Author: Paul Visco
@Version: 1.31 12-08-2008 12-15-2008
@Example:

var myTable = new sb.widget.magicTable({
    table : '#jimmy',
    sortable : 1,
    defaultSortedBy : 2,
    onCellClick : function(td){
        td.style.backgroundColor = 'pink';
        if(td.innerHTML == 'delete'){
            $(td.parentNode).remove();
        }
    },
    onRowClick : function(tr){
        tr.style.backgroundColor = 'red';
        //alert(tr.innerHTML);
    }
});
myTable.sortBy('colName');

//or
var myTable = new sb.widget.magicTable({
    table : {
        headers : ['name', 'age', 'phone'],
        rows : [
            ['Paul', 31, '228-7445'],
            ['Matthew', 36, '228-7613'],
            ['Terry', 29, '228-5731']
        ]
    },
    sortable : 1,
    onCellClick : function(td){
        td.style.backgroundColor = 'pink';
        if(td.innerHTML == 'delete'){
            $(td.parentNode).remove();
        }
    },
    onRowClick : function(tr){
        tr.style.backgroundColor = 'red';
        //alert(tr.innerHTML);
    }
});
myTable.table.appendTo('body');