Backbone.Table — Using getValue

Here, we use the optional column attribute getValue to extract a sortable value from each cell. Then, we combine it with the jQuery Tablesorter plugin.

by secretgspot

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.1/backbone-min.js"></script>
<script src="https://raw.github.com/jsvine/Backbone.Table/master/backbone.table.js"></script>
<script src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
<script src="https://raw.github.com/gist/2502565/5cab496ab58f3297d45850b0fec53170ffc30eb5/vertebrates.js"></script>
<div id="main"></div>

CSS

table { margin: 10px; font-family: Georgia, serif }

thead, tfoot { background: #D8E2EB; }

/* Take advantage of the auto-assigned .even and .odd classes */
tr.even { background: #F2F4F5; }

th { font-weight: bold; }

th, td { padding: 5px 10px; }

th+th, td+td { border-left: 1px solid #FFF; }

/* Take advantage of being able to assign classNames to columns */
td.vertebrate-class { font-style: italic; }
td.vertebrate-class a, td.vertebrate-class a:visited { color: #333; }
td.vertebrate-image img { height: 100px; margin: 0px auto; }

/* Tablesorter stylings */
thead tr .header { 
    padding-right: 20px;
    background: url("http://tablesorter.com/themes/blue/bg.gif") no-repeat center right;
    cursor: pointer;
}

thead tr .headerSortUp {
    background-image: url("http://tablesorter.com/themes/blue/asc.gif");
}

thead tr .headerSortDown {
    background-image: url("http://tablesorter.com/themes/blue/desc.gif");
}

JavaScript

/* 
* NOTE: For the sake of brevity, we're creating the `vertebrates` 
* collection in an external script, included via the final <script> 
* tag above.
*/

/* 
* Create columns array where columns take advantage
* of the getValue() method.
*/
var vertebrate_columns = [
    {
        header: "Class",
        className: "vertebrate-class",
        getFormatted: function() {
            return "<a href='" + this.get("wiki_url") + "' target='_blank'>" + this.get("tax_class") + "</a>";
        },
        getValue: function() {
            return this.get("tax_class");            
        }
    },{
        header: "Description",
        className: "vertebrate-description",
        getFormatted: function() {
            return this.get("description");
        }
    },{
        header: "Average Cost",
        className: "vertebrate-cost",
        getFormatted: function() {
            return this.get("cost");
        },        
        getValue: function() {
            return this.get("cost").replace(/[^\d]/g, "");
        }
        
    }
];

// Create the table.
var vertebrate_table = new Backbone.Table({
    collection: vertebrates,
    columns: vertebrate_columns
});

// Render and append the table.
$("#main").append(vertebrate_table.render().el);

/*
* Take advantage of our getValue functions to help the 
* Tablesorter (http://tablesorter.com/docs/) plugin sort 
* the columns correctly. To see the difference this makes, 
* comment out this function assignment and then click "Run" 
* on this Fiddle.
*/
$.tablesorter.defaults.textExtraction = function (node) { 
    var value = node.getAttribute("value");
    return value === null ? node.innerHTML : value; 
};

// Enable dynamic zebra-striping.
$.tablesorter.defaults.widgets =  ['zebra'];

// Apply the Tablesorter jQuery plugin to this table.
vertebrate_table.$el.tablesorter();