jQuery tablesorter, staticwidget and sortList together?

Question

I cannot figure out why the two will not work together. I have a table that sorts just fine with table sorter. I have styled the rows to look more like nice divs and needed a space between each row. I do this with an empty with a CSS class, then apply the 'static' widget as well. This all works great, when sorting, those invisible spacing rows stay put.

The problem arises when I try to also set a default sortList. I've tried the different code below; trying to set it in javascript and as metadata. The two simply won't work together. I can get sortList to work just fine, as long as I disable the static widget. But when they are together, the rows are static, but stacked together and out of the sort order.

Can anyone help me figure out a way to have the static widget and sortList to work together? Thank you!

(I have jQuery 2.14, tablesorter, staticRow widget and metadata .js's loaded in the html head)

It won't work together this way:

$(document).ready(function(){ 
    $('#myTable').tablesorter({
        widgets: ['staticRow'],
        sortList: [[0,0]]
    });
} );

But does work with either alone:

$(document).ready(function(){ 
    $('#myTable').tablesorter({
        widgets: ['staticRow']
    });
} ); 

or

$(document).ready(function(){ 
    $('#myTable').tablesorter({
        sortList: [[0,0]]
    });
} );

Also tried this:

$(document).ready(function(){ 
    $('#myTable').tablesorter({
        widgets: ['staticRow']
    });
} );

<table id="myTable" class="tablesorter {sortlist: [[0,0],[4,0]]}">

Answer 1

The issue is that tablesorter is sorting the table before the widget is applied. So, the widget is setting the row indexes after the sort. If you have a small table, the easiest solution would be to trigger the sort after tablesorter has initialzied (demo)

$('#myTable')
  .tablesorter({
    widgets: ['staticRow']
   })
   .trigger("sorton", [[[0,0]]]);

If you have a larger table, more time will be needed before initialization. In this case, add the trigger inside a setTimeout.

---

Update: You can prevent quicksearch from hiding all static rows using this code:

$('input#search').quicksearch('table tbody tr', {
  hide: function(){
    this.style.display = $(this).hasClass('static') ? "table-row": "none";
  }
});

But you'll end up with some really big gaps (demo).

To fix this you'll need to include some css; you'll need to use an !important flag to override the inline style (demo).

tr[style*="display: none"] + tr.VerticalSpacer {
  display: none !important;
}