如何在easytab jquery-plugin中修复绑定tablesorter

Question

我想在easytabs的每个标签内容中放一个表（tablesorter）。它只有一个表可见，其他表没有。

我试图用easytabs绑定tablesorter函数：之前。

var nTab1 = 0;
var nTab2 = 0;
var nTab3 = 0;
$(function() {

  $('#tab-container1').easytabs({
    updateHash: true,
    defaultTab: "li:eq("+nTab2+")",
    active: nTab2
  })
  .bind('easytabs:before', function() {
  var $table1 = $('table#tabSort1').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'scroller', 'filter'],
    widgetOptions : {
      filter_columnFilters: false,
      filter_saveFilters : true
    }
  });

  $.tablesorter.filter.bindSearch($table1, $('#tabSearch1'));

  var $table2 = $("table#tabSort2").tablesorter({
   theme: 'blue',
   widgets: ['zebra', 'scroller', 'filter'],
   widgetOptions : {
      filter_columnFilters: false,
      filter_saveFilters : true
   }
  });

  $.tablesorter.filter.bindSearch($table2, $('#tabSearch2'));

  });

});

fiddle

Answer 1

问题是滚动小部件很糟糕。它与其他小部件和库有很多不兼容性。如果您不打算修改列，我建议在选项卡容器上设置最大高度，并使用带有以下更改的粘性标题窗口小部件（demo）：

HTML

<div class="table-wrap1">
  <table id="tabSort1" class="scroll">...</table>
</div>
...
<div class="table-wrap2">
  <table id="tabSort2" class="scroll">...</table>
</div>

CSS

.table-wrap1, .table-wrap2 {
  max-height: 100px;
  overflow: auto;
  position: relative;
}

.tablesorter-sticky-wrapper {
  background: #fff;
}

JS

var nTab1 = 0;
var nTab2 = 0;
var nTab3 = 0;
$(function () {

  var table1 = $('table#tabSort1').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'stickyHeaders', 'filter'],
    widgetOptions: {
      filter_columnFilters: false,
      filter_saveFilters: true,
      stickyHeaders_attachTo: '.table-wrap1'
    }
  });

  $.tablesorter.filter.bindSearch(table1, $('#tabSearch1'));

  var table2 = $("table#tabSort2").tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'stickyHeaders', 'filter'],
    widgetOptions: {
      filter_columnFilters: false,
      filter_saveFilters: true,
      stickyHeaders_attachTo: '.table-wrap2'
    }
  });

  $.tablesorter.filter.bindSearch(table2, $('#tabSearch2'));

  $('#tab-container1').easytabs({
    updateHash: true,
    defaultTab: "li:eq("+nTab2+")",
    active: nTab2
  });

});