开发者

static header for tablesorter plugin

开发者 https://www.devze.com 2023-02-28 07:47 出处:网络
I am using jquery table sorter p开发者_开发技巧lugin but how to make the header static?Ok, i\'m not sure i completely understand your question, but when you say make the header static, i am guessing y

I am using jquery table sorter p开发者_开发技巧lugin but how to make the header static?


Ok, i'm not sure i completely understand your question, but when you say make the header static, i am guessing you mean make the header fixed while having the tbody scroll. I looked and didn't find any good solutions for this plugin. So one possibility could be to wrap the table in a div and run the following method.

$(document).ready(function() {
    var header = $('table.tablesorter thead');
    header.css({'position':'absolute', 'margin-top':'-26px'});
    header.each(function(){
        var tbody = $(this).closest('table').find('tbody');
        var firstRow = tbody.find('tr').first();
        var th = $(this).find('th');
        th.each(function(i){
            var borderWidth = 2;
            var td = $(firstRow.find('td')[i]);
            var w = td.css('width').replace('px', '');
            w = parseInt(w)- borderWidth;
            $(this).css({'width': w+'px'});
        });
    })
});


http://mottie.github.com/tablesorter/docs/example-widget-sticky-header.html has an example of what you are likely looking for.

0

精彩评论

暂无评论...
验证码 换一张
取 消