Tablesorter列寬

Question

我想知道是否有人能夠幫助我請。

我已經放在一起this頁面使用Tablesorter jQuery。該網頁工作正常，但我試圖找到一種方式來改變列的寬度。

我已經通過了文檔和幾個教程，但到目前爲止，我已經在允許用戶更改此設置方面沒有成功。

我只是想知道是否有人可能會看看這個請讓我知道我要去哪裏錯了。

非常感謝和問候

Answer 1

經過一些更多的研究，我發現這是IE css的常見問題。解決辦法是手動設置'td寬度設置'，然後給出所需的列寬。希望這可以幫助。

Answer 2

我有一個tablesorter on github的分支，其中包括一些額外的小部件。其中一個是可調整大小的列小部件 - demo here。我在這裏只發布了可調整大小的小部件代碼，但我想你可能會喜歡額外的存儲腳本，它將列寬保存到包含在小部件文件中的本地存儲/ cookie中。

此處獲取插件文件：http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js

// Add Column resizing widget 
// this widget saves the column widths if 
// $.tablesorter.storage function is included 
// ************************** 
$.tablesorter.addWidget({ 
    id: "resizable", 
    format: function(table) { 
     if ($(table).hasClass('hasResizable')) { return; } 
     $(table).addClass('hasResizable'); 
     var i, j, w, s, c = table.config, 
      $cols = $(c.headerList).filter(':gt(0)'), 
      position = 0, 
      $target = null, 
      $prev = null, 
      len = $cols.length, 
      stopResize = function(){ 
       position = 0; 
       $target = $prev = null; 
       $(window).trigger('resize'); // will update stickyHeaders, just in case 
      }; 
     s = ($.tablesorter.storage) ? $.tablesorter.storage(table, 'tablesorter-resizable') : ''; 
     // process only if table ID or url match 
     if (s) { 
      for (j in s) { 
       if (!isNaN(j) && j < c.headerList.length) { 
        $(c.headerList[j]).width(s[j]); // set saved resizable widths 
       } 
      } 
     } 
     $cols 
      .each(function(){ 
       $(this) 
        .append('<div class="tablesorter-resizer" style="cursor:w-resize;position:absolute;height:100%;width:20px;left:-20px;top:0;z-index:1;"></div>') 
        .wrapInner('<div style="position:relative;height:100%;width:100%"></div>'); 
      }) 
      .bind('mousemove', function(e){ 
       // ignore mousemove if no mousedown 
       if (position === 0 || !$target) { return; } 
       var w = e.pageX - position, 
        n = $prev; 
       // make sure 
       if ($target.width() < -w || ($prev && $prev.width() <= w)) { return; } 
       // resize current column 
       $prev.width($prev.width() + w); 
       position = e.pageX; 
      }) 
      .bind('mouseup', function(){ 
       if (s && $.tablesorter.storage && $target) { 
        s[$prev.index()] = $prev.width(); 
        $.tablesorter.storage(table, 'tablesorter-resizable', s); 
       } 
       stopResize(); 
       return false; 
      }) 
      .find('.tablesorter-resizer') 
      .bind('mousedown', function(e){ 
       // save header cell and mouse position 
       $target = $(e.target).closest('th'); 
       $prev = $target.prev(); 
       position = e.pageX; 
      }); 
     $(table).find('thead').bind('mouseup mouseleave', function(){ 
      stopResize(); 
     }); 
    } 
});