Как исправить привязку таблиц в easytab jquery-плагин - PullRequest
Новая
       11

Как исправить привязку таблиц в easytab jquery-плагин

1 голос
/ 01 апреля 2019

Я хочу поместить таблицу (TableSorter) в каждую вкладку контента с помощью EasyTab.Видна только одна таблица, а остальные нет.

Я пытался связать функцию tableorter с помощью easytabs: before. 

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

1 Ответ

1 голос
/ 04 апреля 2019

Проблема в том, что виджет скроллера отстой.У него много несовместимостей с другими виджетами и библиотеками.Если вы не собираетесь исправлять столбец, я бы предложил установить максимальную высоту для контейнера вкладок и использовать виджет закрепления заголовков со следующими изменениями ( 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
  });

});
...