Table header is not fixed with Jquery fixheadertable plugin

If you load the table result into a div like the following, where you try to fix the height with css with overflow, the header will not be fixed after scrolling

     <div id="divA21InvResult" style="height:300px;overflow:auto"></div>  

Instead you should add the option "height" when you call the fixheadertable function and pair with a simple div without any height declaration in css

       <div id="divA21InvResult"></div>  

        $('#tblA21InvPrint').fixheadertable({
                    caption     : '',
                    height      : '300',                   
                    colratio    : [30, 50, 100, 100, 50, 515, 80, 400, 400],                  
                    sortable    : true,
                    sortedColId : 1,
                    dateFormat  : 'd-M-Y',
                    resizeCol   : true, 
                    sortType    : ['string1','integer', 'date', 'string', 'string', 'string', 'float', 'string', 'string'],
                    textAlign   : ['center','right','center','center','center','left','right','left','left']
                });

Error Placement Issue with Jquery Validation Plugin

I encountered the above problem with jquery validation plugin where the error message spans into multiple lines, eventhough there is more than enough span after the input element.

To solve this problem, you may add in the following css

label.error{
    color:red;   
    width:auto; /*Add this line*/
}

jQuery/Plugin : Problem with Add/Remove row for Tablesorter Plugin

For using the jQuery tablesorter (http://tablesorter.com/docs/ ), the table will not refresh correctly if you use the additional pager plugin.

To solve this problem, you have to add in 2 customised functions/events to take care of the row adding/removal.

Add the following 2 functions to the tablesoter javascript file.

function addRow(table, newRow){

//Rebuild html table from the modified rowsCopy
$.tablesorter.clearTableBody(table);

if (table.config.rowsCopy!=undefined)
$.each(table.config.rowsCopy, function() {
$(table).find('tbody:first').append($(this));
});

//Append new row to the HTML table
$(table).find('tbody:first').append(newRow);

//Update call will rebuild tablesorter.cache from the existing HTML table
$(table).trigger("update");
//With pager plugin, this will call appender function in pager
//In turn, it will redraw the table with pagination
$(table).trigger("appendCache");
//Retain sorting if any
$(table).trigger("sorton",[table.config.sortList]);
}

function removeRow(table, rowId){
//Remove the selected row from pager.rowsCopy
var newRowsCopy = $.grep(table.config.rowsCopy, function(n, i){
return ($(n).attr('id')!=rowId);
});

table.config.rowsCopy = newRowsCopy;

//Rebuild html table from the modified rowsCopy
$.tablesorter.clearTableBody(table);

if (table.config.rowsCopy!=undefined)
$.each(table.config.rowsCopy, function() {
$(table).find('tbody:first').append($(this));
});

//Update call will rebuild tablesorter.cache from the existing HTML table
$(table).trigger("update");
//With pager plugin, this will call appender function in pager
//In turn, it will redraw the table with pagination
$(table).trigger("appendCache");
}

You can bind the functions 2 customised events as follows:

   $this.bind("addRow",function(event,newRow){
addRow(this,newRow);
});

$this.bind("removeRow",function(event,rowId){
removeRow(this,rowId);
});

Finally you can call the events from your page as follows:

  $(sortTable).trigger("removeRow",[id for the row to be removed]);

var newTr = $('<tr><td>New Row</td></tr>');
$(sortTable).trigger("addRow",[newTr]);