Freeze Table Header In Jquery

I am trying to freeze table header. I am using this plugin to achieve the same. When I used this plugin I got this.table_obj is undefined. I tried to find out what's the problem b

Solution 1:

I think the javascript code expects table id to get the table. Probably you have not specified table id when calling javascript code or specified wrong table id or there is no table id in the table markup.

However you may have a look at some other jquery plugin - http://www.farinspace.com/jquery-scrollable-table-plugin/

Your question have some relation with the following question. So, you can also look at that

https://stackoverflow.com/questions/983031/jquery-how-to-freeze-table-header-and-allow-scrolling-of-the-rest-of-the-rows

Solution 2:

i have written fallowing code in order to achieve my goal(as asked in question)-

here is the plugin i have written.

(function($){
$.fn.scrollbarTable=function(i){
var o={};
if(typeof(i)=='number')o.height=i;
elseif(typeof(i)=='object')o=i;
elseif(typeof(i)=='undefined')o={height:300}
return this.each(function(){
var$t=$(this);
var w=$t.width();
$t.width(w-
function(width){
    varparent,child;
    if(width===undefined){
        parent=$('<div style="width:50px;height:50px;overflow:auto"><div style="height:50px;"></div></div>').appendTo('body');
        child=parent.children();
        width=child.innerWidth()-child.height(99).innerWidth();parent.remove();
    }
    return width;
}());
var cols=[];
var tableCols=[];
$t.find('thead th,thead td').each(function(){cols.push($(this).width());});
$t.find('tr:eq(1) th,thead td').each(function(){tableCols.push($(this).width());});
var$firstRow=$t.clone();
$firstRow.find('tbody').remove();
$t.find('thead').remove();
$t.before($firstRow);
$firstRow.find('thead th,thead td').each(function(i){$(this).attr('width',cols[i]);});
$t.find('tr:first th,tr:first td').each(function(i){$(this).attr('width',tableCols[i]);});
var$wrap=$('<div>');
$wrap.css({width:w,height:o.height,overflow:'auto'});
$t.wrap($wrap);})};}(jQuery));

How to use:

$(document).ready(function(){
    $('table#tabss').scrollbarTable();
}

hope it will help someone somewhere..

Any way thanks to all of you for your kind support... :)