Tablesorter initial sort with custom parser, and all columns with sorter turned off

Question

I'm trying to setup a table using tablesorter, where the initial sort is based on hidden input values. I've got that working, but I also want the columns to all be unsortable, especially the one with the hidden input, as it'd be strange to the user to have a column sort based on invisible values.

The obvious solution is to not have it be hidden, and that solves everything. But it's supposed to be a playlist that the user can reorder and then save, and to keep things looking minimal, I want to keep the value hidden. I've tried using onRenderHeader and headerTemaple to manually remove each class, attribute, and click binding, but that didn't work:

/*...rest of initialization and stuff up here*/
headerTemplate: '{content}',
onRenderHeader: function (index){
    $(this).addClass('sorter-false');
    $(this).addClass('tablesorter-headerUnSorted');
    $(this).css('pointer','default');   
    $(this).removeClass('tablesorter-headerDesc');
    $(this).removeClass('tablesorter-headerAsc');
    $(this).attr('aria-disabled','true');
    $(this).unbind('click');
},

Here's the jsfiddle:

http://jsfiddle.net/bigheadedmammal/a7Ybw/6/

So question: is there a way to setup an initial sort on a column, but also set that columns' sort to false? Do I need to create a custom widget to have that functionality?

---

edit: Got it!

I needed to set a custom textExtraction method. First, create the variable:

var hiddenExtract = function(node, table, cellIndex){
    return $(node).find("input[name='edit_clip_rank']").val();
}

And then add the property, textExtraction, to the initialization:

textExtraction: hiddenExtract

jsfiddle also updated. Hope this helps people down the road. I was looking at a much shorter set of docs, and didn't see this property. Found better docs at: http://mottie.github.io/tablesorter/docs/#textextraction

HTML:

<table id="clipsTable" class="tablesorter">
    <thead>
        <tr>
            <th>Fake order</th>
            <th>Title</th>
            <th>Description</th>
            <th>Buttons</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Title for 1</td>
            <td>Description for 1</td>
            <td>
                <button>Hi guys</button>
                <input type="hidden" name="edit_clip_rank" value="4"/>
            </td>
        </tr>
        ...
    </tbody>
</table>

Javascript:

$("#clipsTable").tablesorter({
    headers: {
        0: { sorter: false },
        1: { sorter: false },
        2: { sorter: false },
        3: { sorter: false }
    },
    sortList: [ [3, 0] ],
    textExtraction: {
        3: function(node){
            return $(node).find("input[name='edit_clip_rank']").val();
        }
    }
});

Answer 1

There is a lot of excessive, unnecessary code in the solution. Try this (demo):

HTML

<table id="clipsTable" class="tablesorter">
    <thead>
        <tr>
            <th class="sorter-false">Fake order</th>
            <th class="sorter-false">Title</th>
            <th class="sorter-false">Description</th>
            <th class="sorter-false">Buttons</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Title for 1</td>
            <td>Description for 1</td>
            <td>
                <button>Hi guys</button>
                <input type="hidden" name="edit_clip_rank" value="4"/>
            </td>
        </tr>
        ...
    </tbody>
</table>

Script

$("#clipsTable").tablesorter({
    sortList: [ [3, 0] ],
    textExtraction: {
        3: function(node){
            return $(node).find('input[name]').val();
        }
    }
});

And if you use the textAttribute option instead of a hidden input, include a data-text attribute for that table cell (demo):

<td data-text="4">
    <button>Hi guys</button>
</td>

and use this script:

$("#clipsTable").tablesorter({
    sortList: [ [3, 0] ]
});