Sorting by empty cells "emptyTo" Tablesorter doesn't work

Question

I have a table with some data with dates and i want it to sort by the cells that are empty. By default tablesorter places them at the bottom and i need them at the top. I read other posts related and none of them seems to work for me and i'm trying to figure out why.

I'm using Tablesorter 2.29.5

 /*! TableSorter (FORK) v2.29.5 *//*
  * Client-side table sorting with ease!
  * @requires jQuery v1.2.6+

And i'm setting the libraries properly (everything else works fine)

This is my tablesorter config in Jquery:

 $('#tablesorter')
            .tablesorter({
                theme : 'blue',
                widgets: ['filter', 'reflow','resizable'],
                sortList: [[0,0]],
                emptyTo: 'top',
                widgetOptions: {
                    resizable: true, 
                    resizable_widths : [ '12%', '12%', '10%', '10%', '10%', '10%', '17%', '9%', '9%','0%']   
                }

            }).tablesorterPager({
                container: $(".paginatorTableSorter"),
                output: '{{ "table.showing"|trans }} {startRow} {{ "table.to"|trans }} {endRow} ({filteredRows})'
            });
        $(".tablesorter").data('tablesorter').widgets = ['zebra', 'columns'];
        $(".tablesorter").trigger('applyWidgets');
        $('#tablesorter')
                .trigger('sortReset')
                .trigger('filterReset')
                .trigger('resizableReset')
                .trigger('pageAndSize', [1, 10]);

I also tried to sort by the column but since they're dates empty cells are ignored, so i'm setting emptyTo: 'top' following the jQuery tablesorter documentation https://mottie.github.io/tablesorter/docs/#emptyto

This is my (adapted) html(and Twig):

<thead>
  <tr class="warning">
    <th class="text-center">{{ 'table.title.time.check-in' |trans }}</th>
    <th class="text-center">{{ 'table.title.time.check-out' |trans }}</th>                        
  </tr>
</thead>
<tbody>
  <tr>
    <td class="text-center">{{ line.FECHA_E }}</td>
    <td class="text-center">{{ line.FECHA_S }}</td>
  </tr>
</tbody>

Is there anything i'm missing?

I wonder if the rendered cell content is truly empty; maybe try trimming the content in the textExtraction callback... then, please share an example of the rendered HTML in this demo. — Mottie
No need to post the demonstration you where totally right!. First thing i did was to make sure the input was indeed empty and fool of me it was actually null, not empty. Just added an if condition to leave empty the input if var value is null. Thank you so much! you saved my day. You can post it as an answer so i can give you the validation. — SpicyTacos23

SpicyTacos23 SpicyTacos23 · Accepted Answer · 2019-02-21T11:24:47

So, yes. As Mottie said i double checked the real value of the input and found the problem.

<tbody>
 <tr>
  <td class="text-center">{{ line.FECHA_E }}</td>
  <td class="text-center">{% if line.FECHA_S is null %}{% else %}{{ line.FECHA_S }}{% endif %}</td>
 </tr>
</tbody>

After posting the question i realized that i left the .trigger('sortReset') on the config but that was commented on my code.

In case anybody copies my tablesorter config just remove that part so it won't reset the default sorting values.

Once again thanks Mottie!

Sorting by empty cells "emptyTo" Tablesorter doesn't work

1 Answers