Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

172 lines (153 sloc) 5.48 kb
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Page for Backbone Tablesorter</title>
<link rel="stylesheet" type="text/css" href="lib/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<h1>Example Page for Backbone Tablesorter</h1>
<p>
This is a lot of fun. See the <a href="https://github.com/reconbot/backbone-tablesorter">readme</a> for explanations.
</p>
</div>
</div>
<hr>
<div class="row">
<div class="span12">
<h2>Simple Use</h2>
Lets make a quick and easy example table. I don't even want to think about making columns, or figuring out datatypes. Also, lets display age before alphabet.
</div>
</div>
<div class="row">
<div class="span8">
<pre>
var nameTable, names = [
{name:'Bill',age:42},
{name:'Jeff',age:19},
{name:'Maggie',age:28}
];
$(function(){
nameTable = new BTS.SortableTable({
el: $('#ageTable'),
tableClass:'table table-bordered table-striped',
collection: new BTS.SortableList(names)
});
nameTable.render();
nameTable.sortBy('age');
});
</pre>
</div>
<div class="span4">
<table id="ageTable"></table>
</div>
</div>
<hr>
<div class="row">
<div class="span12">
<h2>Advanced use</h2>
Now for something completely different. Ahead we'll make a live updating twitter search by extending the <a href="twitter.js">SortableList class</a>.
</div>
</div>
<div class="row">
<div class="span12">
<form id="search" class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label">Twitter Search</label>
<div class="controls">
<div class="input-append">
<input class="span2" id="twitterSearch" type="text" value="backbonejs"/><input type="submit" class="btn btn-primary" value="Search"/>
</div>
</div>
</div>
</fieldset>
</form>
<table id="twitterTable"></table>
</div>
</div>
<hr>
<div class="row">
<div class="span12">
<h2>More Advanced</h2>
<p>
Lets blow our last example out of the water. I want to extend the SortableTable() class itself. I'm sick of these single state rows, I need something more dynamic. Behold the <a href="bts-expandable-table.js">ExpandableTable() and Expanded Views</a>
</p>
</div>
</div>
<div class="row">
<div class="span12">
<table id="expandable"></table>
</div>
</div>
</div>
<!-- Soooo many deps -->
<script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="lib/underscore-min.js"></script>
<script type="text/javascript" src="lib/mustache.js"></script>
<script type="text/javascript" src="lib/backbone-min.js"></script>
<script type="text/javascript" src="bts-table.js"></script>
<script type="text/javascript" src="twitter.js"></script>
<script type="text/javascript" src="templates.js"></script>
<script type="text/javascript" src="bts-expandable-table.js"></script>
<script type="text/javascript">
var nameTable, names = [{name:'Bill',age:42},{name:'Jeff',age:19},{name:'Maggie',age:28}];
var tweets = new TweetSearch(null,{search:$('#twitterSearch').val()});
tweets.fetch();
var twitterTable;
var expandoTable;
$(function(){
//basic
nameTable = new BTS.SortableTable({
el: $('#ageTable'),
tableClass:'table table-bordered table-striped',
collection: new BTS.SortableList(names)
});
nameTable.render();
nameTable.collection.sortBy('age');
//advanced
var twitterCol = [
{name:'User', field:'from_user', render:function(user, model){
var url = "https://twitter.com/" + user + "/status/" + model.get('id_str');
return '<a target="_blank" href="' + url + '"><img src="'+ model.get('profile_image_url') + '" /> <br>' + user + "</a>";
}},
{name:'Tweet', field:'text'},
{name:'Created', field: 'created_at'}
];
twitterTable = new BTS.SortableTable({
el: $('#twitterTable'),
collection: tweets,
tableClass:'table table-bordered table-striped',
col:twitterCol
});
twitterTable.render();
$('#search').submit(function(e){
e.preventDefault();
tweets.search = $('#twitterSearch').val();
tweets.fetch();
});
//Really advanced
var advancedTwitterCol = _.map(twitterCol, function(c){return _.clone(c);});
advancedTwitterCol.unshift({
name:'expand',
className: 'js-toggle',
render:function(){return '<i class="icon-random"></i>';}
});
var ExpandedTwitterRow = BTS.ExpandableTableRow.extend({
template: 'expanded-twitter-row'
});
expandoTable = new BTS.ExpandableTable({
el: $('#expandable'),
view: BTS.ExpandableTableRow,
expandedView: ExpandedTwitterRow,
collection: tweets,
col: advancedTwitterCol,
keepRow: true
});
expandoTable.render();
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.